/* =========================================================
   VozConsulta — Sistema de diseño
   Paleta: papel frío + tinta profunda + señal (teal) + acento cálido
   Tipografía: Fraunces (display) / Inter (texto) / JetBrains Mono (datos)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --papel:      #F5F7FA;
  --papel-alt:  #EDF1F5;
  --tinta:      #12213D;
  --tinta-suave:#4A5A78;
  --linea:      #DCE3EC;
  --senal:      #0E7C86;      /* teal — "la voz que se convierte en texto" */
  --senal-suave:#E4F2F1;
  --senal-fuerte:#095B63;
  --acento:     #E8A33D;      /* cálido, uso mínimo */
  --grabando:   #D64550;
  --blanco:     #FFFFFF;
  --sombra: 0 8px 24px -8px rgba(18,33,61,.18);
  --radio: 14px;
  --radio-chico: 8px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.1;
  margin:0 0 .4em;
}
p{margin:0 0 1em;}
a{color:var(--senal-fuerte); text-decoration:none;}
a:hover{text-decoration:underline;}
.mono{font-family:'JetBrains Mono',monospace;}

img,svg{max-width:100%;}
button{font-family:inherit;}

:focus-visible{
  outline:2.5px solid var(--senal);
  outline-offset:2px;
}

/* ---------- Layout utilitario ---------- */
.contenedor{max-width:1120px; margin:0 auto; padding:0 24px;}
.contenedor-angosto{max-width:760px; margin:0 auto; padding:0 24px;}
.seccion{padding:88px 0;}
@media(max-width:720px){.seccion{padding:56px 0;}}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  border-radius:999px;
  border:1.5px solid transparent;
  font-weight:600; font-size:15px;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primario{background:var(--tinta); color:var(--blanco);}
.btn-primario:hover{background:#0A1730; text-decoration:none;}
.btn-senal{background:var(--senal); color:var(--blanco);}
.btn-senal:hover{background:var(--senal-fuerte); text-decoration:none;}
.btn-fantasma{background:transparent; color:var(--tinta); border-color:var(--linea);}
.btn-fantasma:hover{border-color:var(--tinta); text-decoration:none;}
.btn-peligro{background:transparent; color:var(--grabando); border-color:#F1C4C8;}
.btn-peligro:hover{background:#FDF1F2; text-decoration:none;}
.btn-grande{padding:16px 34px; font-size:16.5px;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}

/* ---------- Navegación ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(245,247,250,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-weight:600; font-size:19px; color:var(--tinta);
}
.logo-marca{color:var(--senal-fuerte);}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{color:var(--tinta-suave); font-weight:500; font-size:14.5px;}
.nav-links a:hover{color:var(--tinta); text-decoration:none;}
.nav-cta{display:flex; gap:10px; align-items:center;}

/* ---------- Hero con firma: onda -> texto ---------- */
.hero{padding:76px 0 40px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--senal-fuerte); background:var(--senal-suave);
  padding:6px 12px; border-radius:999px; margin-bottom:22px;
}
.dot-viva{width:7px; height:7px; border-radius:50%; background:var(--grabando); animation:pulso 1.8s infinite;}
@keyframes pulso{0%,100%{opacity:1;}50%{opacity:.25;}}
.hero h1{font-size:clamp(36px,5vw,58px); color:var(--tinta);}
.hero h1 em{font-style:italic; color:var(--senal-fuerte);}
.hero-sub{font-size:18.5px; color:var(--tinta-suave); max-width:520px;}
.hero-acciones{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-nota{margin-top:18px; font-size:13.5px; color:var(--tinta-suave);}

/* La "firma": panel que dramatiza voz -> onda -> texto redactado */
.firma-panel{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:26px;
}
.firma-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;}
.firma-tag{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--tinta-suave);}
.firma-tag b{color:var(--grabando);}
.onda{display:flex; align-items:flex-end; gap:3px; height:56px; margin:6px 0 20px;}
.onda span{
  flex:1; background:var(--senal); border-radius:3px;
  animation:onda-mov 1.1s ease-in-out infinite;
}
.onda span:nth-child(odd){background:var(--senal-fuerte);}
@keyframes onda-mov{
  0%,100%{height:18%;} 50%{height:100%;}
}
.onda span:nth-child(1){animation-delay:.0s;}
.onda span:nth-child(2){animation-delay:.08s;}
.onda span:nth-child(3){animation-delay:.16s;}
.onda span:nth-child(4){animation-delay:.24s;}
.onda span:nth-child(5){animation-delay:.32s;}
.onda span:nth-child(6){animation-delay:.4s;}
.onda span:nth-child(7){animation-delay:.32s;}
.onda span:nth-child(8){animation-delay:.24s;}
.onda span:nth-child(9){animation-delay:.16s;}
.onda span:nth-child(10){animation-delay:.08s;}
.onda span:nth-child(11){animation-delay:.0s;}
.onda span:nth-child(12){animation-delay:.08s;}
.onda span:nth-child(13){animation-delay:.16s;}
.onda span:nth-child(14){animation-delay:.24s;}
.onda span:nth-child(15){animation-delay:.32s;}
.onda span:nth-child(16){animation-delay:.4s;}
.onda span:nth-child(17){animation-delay:.32s;}
.onda span:nth-child(18){animation-delay:.24s;}

.firma-nota{
  background:var(--papel-alt); border-radius:var(--radio-chico); padding:16px 18px;
  font-size:14px; color:var(--tinta);
}
.firma-nota .clave{color:var(--senal-fuerte); font-weight:700; font-family:'Fraunces',serif;}
.firma-nota p{margin:0 0 8px;}
.firma-nota p:last-child{margin:0;}

/* ---------- Proceso (pasos reales del flujo) ---------- */
.pasos{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px;}
@media(max-width:900px){.pasos{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.pasos{grid-template-columns:1fr;}}
.paso{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:26px 22px; position:relative;
}
.paso-num{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--senal-fuerte);
  display:block; margin-bottom:14px;
}
.paso h3{font-size:18px; margin-bottom:6px;}
.paso p{font-size:14.5px; color:var(--tinta-suave); margin:0;}

/* ---------- Secciones generales ---------- */
.titular-seccion{max-width:640px; margin:0 auto 48px; text-align:center;}
.titular-seccion h2{font-size:clamp(28px,3.4vw,38px);}
.titular-seccion p{color:var(--tinta-suave); font-size:17px;}

.tarjetas-uso{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:840px){.tarjetas-uso{grid-template-columns:1fr;}}
.tarjeta-uso{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:28px; transition:box-shadow .2s ease, transform .2s ease;
}
.tarjeta-uso:hover{box-shadow:var(--sombra); transform:translateY(-3px);}
.tarjeta-uso .icono{
  width:42px; height:42px; border-radius:10px; background:var(--senal-suave);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--senal-fuerte);
}
.tarjeta-uso h3{font-size:18px;}
.tarjeta-uso p{color:var(--tinta-suave); font-size:14.5px; margin:0;}

/* ---------- Planes ---------- */
.planes-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media(max-width:980px){.planes-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.planes-grid{grid-template-columns:1fr;}}
.plan-card{
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio);
  padding:28px 24px; display:flex; flex-direction:column; gap:16px;
}
.plan-card.destacado{border-color:var(--senal); box-shadow:var(--sombra); position:relative;}
.plan-badge{
  position:absolute; top:-13px; left:24px; background:var(--senal); color:#fff;
  font-size:11.5px; font-weight:600; padding:4px 12px; border-radius:999px;
  font-family:'JetBrains Mono',monospace; letter-spacing:.03em;
}
.plan-nombre{font-family:'Fraunces',serif; font-size:20px; font-weight:600;}
.plan-precio{font-size:34px; font-weight:700; font-family:'Fraunces',serif;}
.plan-precio span{font-size:14px; font-weight:400; color:var(--tinta-suave); font-family:'Inter',sans-serif;}
.plan-desc{font-size:13.5px; color:var(--tinta-suave); margin:0;}
.plan-lista{list-style:none; padding:0; margin:0; font-size:14px; display:flex; flex-direction:column; gap:9px;}
.plan-lista li{display:flex; gap:8px; align-items:flex-start;}
.plan-lista li::before{content:"✓"; color:var(--senal-fuerte); font-weight:700;}

/* ---------- Footer ---------- */
.pie{border-top:1px solid var(--linea); padding:44px 0; margin-top:40px;}
.pie-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.pie small{color:var(--tinta-suave); font-size:13px;}

/* =========================================================
   Vistas internas (app): auth, dashboard, grabación, historial
   ========================================================= */
.app-shell{min-height:100vh; display:flex;}
.app-lateral{
  width:238px; flex-shrink:0; background:var(--tinta); color:#fff;
  padding:26px 18px; display:flex; flex-direction:column; gap:6px;
}
.app-lateral .logo{color:#fff;}
.app-lateral .logo-marca{color:#7FD7CE;}
.app-nav{margin-top:30px; display:flex; flex-direction:column; gap:2px;}
.app-nav a{
  color:#C7D0E0; font-size:14.5px; font-weight:500; padding:10px 12px; border-radius:9px;
  display:flex; align-items:center; gap:10px;
}
.app-nav a:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff;}
.app-nav a.activo{background:rgba(255,255,255,.1); color:#fff;}
.app-lateral .abajo{margin-top:auto; font-size:13px; color:#8391AC;}
.app-lateral .plan-pill{
  background:rgba(255,255,255,.08); border-radius:10px; padding:12px 14px; font-size:12.5px; margin-top:14px;
}
.app-lateral .plan-pill b{color:#fff; display:block; font-size:13.5px; margin-bottom:3px;}
.barra-cupo{height:5px; background:rgba(255,255,255,.15); border-radius:3px; margin-top:8px; overflow:hidden;}
.barra-cupo i{display:block; height:100%; background:#7FD7CE;}

.app-main{flex:1; padding:34px 40px; max-width:1180px;}
@media(max-width:880px){
  .app-shell{flex-direction:column;}
  .app-lateral{width:100%; flex-direction:row; align-items:center; flex-wrap:wrap;}
  .app-nav{flex-direction:row; margin-top:0;}
  .app-lateral .abajo{display:none;}
  .app-main{padding:22px;}
}

.encabezado-pagina{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:14px;}
.encabezado-pagina h1{font-size:26px;}
.encabezado-pagina p{color:var(--tinta-suave); margin:0; font-size:14.5px;}

.tarjetas-metricas{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px;}
@media(max-width:720px){.tarjetas-metricas{grid-template-columns:1fr;}}
.metrica{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:20px 22px;}
.metrica .valor{font-family:'Fraunces',serif; font-size:30px; font-weight:600;}
.metrica .etiqueta{font-size:13px; color:var(--tinta-suave);}

.panel{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:26px; margin-bottom:24px;}
.panel h2{font-size:18px; margin-bottom:4px;}

/* Auth */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--papel-alt);}
.auth-card{width:100%; max-width:420px; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:38px 34px; box-shadow:var(--sombra);}
.auth-card h1{font-size:24px;}
.auth-card .sub{color:var(--tinta-suave); font-size:14.5px; margin-bottom:24px;}
.campo{margin-bottom:16px;}
.campo label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--tinta);}
.campo input, .campo select, .campo textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--linea); border-radius:9px;
  font-size:14.5px; font-family:inherit; color:var(--tinta); background:var(--papel);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{outline:none; border-color:var(--senal);}
.alerta{padding:12px 14px; border-radius:9px; font-size:13.5px; margin-bottom:18px;}
.alerta-error{background:#FDEEF0; color:#B02A38; border:1px solid #F3C7CD;}
.alerta-ok{background:var(--senal-suave); color:var(--senal-fuerte); border:1px solid #BEE3E0;}
.auth-pie{text-align:center; margin-top:20px; font-size:13.5px; color:var(--tinta-suave);}

/* Grabación */
.grabador{background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio); padding:28px; text-align:center;}
.estado-grabacion{font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--tinta-suave); margin-bottom:18px;}
.estado-grabacion.activo{color:var(--grabando);}
.reloj{font-family:'JetBrains Mono',monospace; font-size:42px; font-weight:500; margin:6px 0 24px;}
.onda-viz{display:flex; align-items:flex-end; justify-content:center; gap:3px; height:70px; margin-bottom:26px;}
.onda-viz span{width:5px; background:var(--linea); border-radius:3px; height:8%; transition:height .08s ease, background .2s ease;}
.controles-grabacion{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn-mic{
  width:76px; height:76px; border-radius:50%; border:none; cursor:pointer;
  background:var(--tinta); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .15s ease; flex-shrink:0;
}
.btn-mic:hover{transform:scale(1.04);}
.btn-mic.grabando{background:var(--grabando); animation:pulso-mic 1.6s infinite;}
@keyframes pulso-mic{0%{box-shadow:0 0 0 0 rgba(214,69,80,.35);}70%{box-shadow:0 0 0 16px rgba(214,69,80,0);}100%{box-shadow:0 0 0 0 rgba(214,69,80,0);}}

.campo-lateral{display:flex; flex-direction:column; gap:14px;}

textarea.transcripcion-caja{min-height:220px; resize:vertical; line-height:1.6; font-size:14.5px;}

/* ---------- Layout principal de la grabación: barra compacta arriba, transcripción protagonista ---------- */
.estudio-v2{display:flex; flex-direction:column; gap:20px;}

.barra-grabacion{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.barra-grabacion-izq{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.barra-grabacion-info{text-align:left;}
.barra-grabacion .estado-grabacion{margin-bottom:2px;}
.reloj-chico{font-family:'JetBrains Mono',monospace; font-size:21px; font-weight:500;}
.onda-viz-chica{display:flex; align-items:flex-end; gap:2px; height:34px;}
.onda-viz-chica span{width:3px; background:var(--linea); border-radius:2px; height:12%; transition:height .08s ease, background .2s ease;}
.btn-mic-chico{width:54px; height:54px; font-size:19px;}

.barra-grabacion-der{display:flex; gap:14px; flex-wrap:wrap; flex:1; justify-content:flex-end;}
.campo-inline{margin-bottom:0; min-width:190px; flex:1; max-width:280px; text-align:left;}
.campo-inline label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px; color:var(--tinta-suave);}

.panel-transcripcion{display:flex; flex-direction:column;}
.transcripcion-grande{min-height:46vh; font-size:15.5px;}

@media(max-width:720px){
  .barra-grabacion{flex-direction:column; align-items:stretch;}
  .barra-grabacion-der{justify-content:stretch;}
  .campo-inline{max-width:none;}
  .transcripcion-grande{min-height:280px;}
}

.resumen-caja{
  background:var(--papel-alt); border-radius:var(--radio-chico); padding:20px 22px; font-size:14.5px; line-height:1.65;
  white-space:pre-wrap;
}
.resumen-caja strong{color:var(--senal-fuerte);}

/* Historial */
.tabla-historial{width:100%; border-collapse:collapse; background:var(--blanco); border-radius:var(--radio); overflow:hidden; border:1px solid var(--linea);}
.tabla-historial th, .tabla-historial td{padding:14px 18px; text-align:left; font-size:14px; border-bottom:1px solid var(--linea);}
.tabla-historial th{background:var(--papel-alt); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--tinta-suave);}
.tabla-historial tr:last-child td{border-bottom:none;}
.tabla-historial tr:hover td{background:var(--papel-alt);}
.etiqueta-tipo{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--senal-suave); color:var(--senal-fuerte);
}
.acciones-fila{display:flex; gap:10px;}
.acciones-fila a, .acciones-fila button{font-size:13px;}

.vacio{
  text-align:center; padding:60px 20px; color:var(--tinta-suave); background:var(--blanco);
  border:1.5px dashed var(--linea); border-radius:var(--radio);
}
.vacio h3{color:var(--tinta); margin-bottom:8px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- Impresión / exportar a PDF ---------- */
@media print{
  .no-imprimir{display:none !important;}
  .app-shell{display:block;}
  .app-main{padding:0; max-width:none;}
  body{background:#fff;}
  .panel{border:none; box-shadow:none; padding:0; margin-bottom:28px;}
  .resumen-caja{background:#fff; padding:0;}
  .encabezado-pagina{margin-bottom:20px;}
  a[href]::after{content:"";} /* evita que el navegador imprima las URLs de los links */
}