/* =====================================================================
   ClinicaMed v2 — sistema de diseño
   Layout de sidebar, tipografía Inter, tarjetas y tablas de densidad media.
   Los nombres de clase se mantienen compatibles con la v1.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Marca — negro y dorado.
     Los nombres --azul* se conservan para no reescribir las 22 páginas:
     ahora contienen el dorado y el negro de la marca. */
  --azul:#8a6d10;        /* dorado profundo: legible como texto y enlaces sobre blanco */
  --azul-osc:#6d5509;    /* dorado más oscuro para hover */
  --azul-prof:#0f0f12;   /* negro de la marca: sidebar y login */
  --azul-claro:#f7f1de;  /* dorado muy suave para fondos de icono y badges */
  --azul-suave:#fdfbf4;  /* hover de filas */
  --acento:#c9a227;      /* dorado brillante: solo sobre negro o como relleno */
  --acento-claro:#e6cd7a;
  --negro-2:#1a1a1f;

  /* Semánticos, corridos hacia temperaturas cálidas */
  --verde:#1f7a52; --verde-bg:#e4f2ea;
  --rojo:#b3392e;  --rojo-bg:#fbeceb;
  --amar:#a9761a;  --amar-bg:#fdf3e0;
  --info-bg:#f7f1de;

  /* Neutros cálidos (grises con una pizca de oro, no grises de fábrica) */
  --texto:#1a1916; --texto-2:#4d4940; --texto-3:#8b8578;
  --borde:#e8e4da; --borde-2:#f1eee6;
  --fondo:#faf9f6; --panel:#ffffff;

  --radio:10px; --radio-sm:6px; --radio-lg:14px;
  --sombra:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --sombra-md:0 4px 12px rgba(16,24,40,.07), 0 1px 3px rgba(16,24,40,.05);
  --sidebar:248px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14.5px; line-height:1.55; color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}
svg{flex:none}

/* =================== SIDEBAR =================== */
.lateral{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar);
  background:linear-gradient(180deg,#131317,var(--azul-prof) 55%,#0a0a0c);
  color:#c9c4b6; display:flex; flex-direction:column; z-index:40;
  border-right:1px solid rgba(201,162,39,.18);
}
.lateral .marca{
  display:flex; align-items:center; gap:.65rem;
  padding:1.15rem 1.15rem 1rem; border-bottom:1px solid rgba(201,162,39,.16);
}
.lateral .marca .logo{
  width:36px;height:36px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,#e6cd7a,#b8901c);
  display:grid;place-items:center;color:#17150e;font-weight:700;font-size:15px;
  box-shadow:0 1px 8px rgba(201,162,39,.3);
}
.lateral .marca .txt{min-width:0}
.lateral .marca b{display:block;color:#fff;font-size:.95rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lateral .marca span{font-size:.72rem;color:#8d8674;letter-spacing:.3px}

.lateral nav{padding:.85rem .7rem;flex:1;overflow-y:auto}
.lateral .grupo{font-size:.68rem;text-transform:uppercase;letter-spacing:.9px;
  color:#7d735a;padding:.9rem .6rem .35rem;font-weight:600}
.lateral nav a{
  display:flex;align-items:center;gap:.7rem;
  padding:.58rem .65rem;margin-bottom:2px;border-radius:var(--radio-sm);
  color:#b5afa0;font-size:.885rem;font-weight:500;transition:background .12s,color .12s;
}
.lateral nav a:hover{background:rgba(201,162,39,.1);color:#f0e6cd;text-decoration:none}
.lateral nav a.activo{background:linear-gradient(135deg,#d4ae2e,#b8901c);color:#17150e;font-weight:650;
  box-shadow:0 1px 10px rgba(201,162,39,.35)}
.lateral nav a .num{margin-left:auto;background:rgba(201,162,39,.22);color:var(--acento-claro);
  font-size:.7rem;padding:.05rem .42rem;border-radius:99px;font-weight:600}
.lateral nav a.activo .num{background:rgba(23,21,14,.2);color:#17150e}

.lateral .pie-lat{padding:.8rem;border-top:1px solid rgba(201,162,39,.16)}
.usuario-caja{display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem;border-radius:var(--radio-sm)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acento);color:#17150e;
  display:grid;place-items:center;font-size:.78rem;font-weight:700;flex:none}
.usuario-caja .datos{min-width:0;flex:1}
.usuario-caja .datos b{display:block;color:#fff;font-size:.82rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario-caja .datos span{font-size:.7rem;color:#8d8674;text-transform:capitalize}
.usuario-caja .salir{color:#938c79;padding:.3rem;border-radius:var(--radio-sm);display:grid;place-items:center}
.usuario-caja .salir:hover{background:rgba(201,162,39,.15);color:var(--acento-claro)}

/* =================== ÁREA PRINCIPAL =================== */
.marco{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}
.barra{
  background:var(--panel);border-bottom:1px solid var(--borde);
  padding:.7rem 1.6rem;display:flex;align-items:center;gap:1rem;
  position:sticky;top:0;z-index:30;
}
.barra .titulo{font-size:1.02rem;font-weight:600;margin:0}
.barra .fecha{color:var(--texto-3);font-size:.8rem}
.barra .buscador{margin-left:auto;position:relative;max-width:300px;width:100%}
.barra .buscador input{padding-left:2.1rem;background:var(--fondo);border-color:var(--borde-2);height:36px}
.barra .buscador svg{position:absolute;left:.65rem;top:50%;transform:translateY(-50%);color:var(--texto-3)}
.hamburguesa{display:none;background:none;border:1px solid var(--borde);color:var(--texto-2);
  border-radius:var(--radio-sm);padding:.35rem .5rem;cursor:pointer;line-height:0}
.solo-movil{display:none;font-size:.92rem}

.contenido{padding:1.5rem 1.6rem 3rem;max-width:1360px;width:100%;flex:1}
.pie{text-align:center;color:var(--texto-3);font-size:.76rem;padding:1rem 0 1.5rem}

/* =================== TIPOGRAFÍA =================== */
h1{font-size:1.4rem;font-weight:650;margin:0 0 .25rem;letter-spacing:-.2px}
h2{font-size:1.02rem;font-weight:600;margin:1.5rem 0 .7rem;letter-spacing:-.1px}
h3{font-size:.83rem;font-weight:600;margin:1.4rem 0 .6rem;color:var(--texto-2);
  text-transform:uppercase;letter-spacing:.7px}
.sub{color:var(--texto-3);font-size:.83rem}
.encabezado{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}

/* =================== TARJETAS =================== */
.tarjeta{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:1.15rem;margin-bottom:1.15rem;box-shadow:var(--sombra)}
.tarjeta > h2:first-child,.tarjeta > h3:first-child{margin-top:0}
.grid{display:grid;gap:1.15rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* KPIs */
.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:1rem 1.1rem;box-shadow:var(--sombra);position:relative;overflow:hidden}
.kpi .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--azul-claro);color:var(--azul);margin-bottom:.65rem}
.kpi .t{color:var(--texto-3);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.6px;font-weight:600}
.kpi .n{font-size:1.75rem;font-weight:680;line-height:1.15;letter-spacing:-.6px;margin:.1rem 0}
.kpi a{font-size:.78rem;font-weight:500}
.kpi.verde .ico{background:var(--verde-bg);color:var(--verde)}
.kpi.rojo  .ico{background:var(--rojo-bg);color:var(--rojo)}
.kpi.amar  .ico{background:var(--amar-bg);color:var(--amar)}
.kpi.rojo .n{color:var(--rojo)}

/* =================== TABLAS =================== */
.tabla-wrap{overflow-x:auto;margin:0 -1.15rem;padding:0 1.15rem}
table{width:100%;border-collapse:collapse;background:transparent}
th,td{padding:.62rem .7rem;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--borde-2)}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;
  color:var(--texto-3);font-weight:600;white-space:nowrap;
  border-bottom:1px solid var(--borde);background:transparent}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--azul-suave)}
tr:last-child td{border-bottom:0}
td.der,th.der{text-align:right}
.vacio{text-align:center;color:var(--texto-3);padding:2.5rem 1rem}
.vacio .ico{width:44px;height:44px;border-radius:50%;background:var(--fondo);
  display:grid;place-items:center;margin:0 auto .7rem;color:var(--texto-3)}

/* =================== FORMULARIOS =================== */
.campo{margin-bottom:.9rem}
label{display:block;font-size:.79rem;font-weight:600;color:var(--texto-2);margin-bottom:.3rem}
input,select,textarea{
  width:100%;padding:.52rem .65rem;border:1px solid var(--borde);
  border-radius:var(--radio-sm);font:inherit;font-size:.9rem;
  background:var(--panel);color:var(--texto);transition:border-color .12s,box-shadow .12s;
}
input:hover,select:hover,textarea:hover{border-color:#cfc7b4}
input:focus,select:focus,textarea:focus{outline:0;border-color:#b8901c;
  box-shadow:0 0 0 3px rgba(201,162,39,.18)}
input[type=checkbox]{width:auto}
textarea{min-height:88px;resize:vertical}
.fila{display:grid;gap:.9rem}
.f2{grid-template-columns:1fr 1fr}
.f3{grid-template-columns:repeat(3,1fr)}
.f4{grid-template-columns:repeat(4,1fr)}
.ayuda{font-size:.76rem;color:var(--texto-3);margin-top:.25rem}
code{background:var(--fondo);padding:.1rem .35rem;border-radius:4px;
  font-size:.85em;border:1px solid var(--borde-2)}

/* =================== BOTONES =================== */
.btn{display:inline-flex;align-items:center;gap:.4rem;justify-content:center;
  background:linear-gradient(145deg,#d4ae2e,#b8901c);color:#17150e;border:1px solid #a8830f;
  padding:.5rem .9rem;border-radius:var(--radio-sm);cursor:pointer;
  font:inherit;font-size:.865rem;font-weight:550;
  transition:background .12s,box-shadow .12s;white-space:nowrap}
.btn:hover{background:linear-gradient(145deg,#e0bb3d,#c49a1f);border-color:#8a6d10;
  text-decoration:none;color:#17150e;box-shadow:0 3px 12px rgba(184,144,28,.3)}
.btn.sec{background:var(--panel);color:var(--texto-2);border-color:var(--borde)}
.btn.sec:hover{background:var(--fondo);color:var(--texto);border-color:#cfc7b4;box-shadow:none}
.btn.negro{background:var(--azul-prof);color:#f3ead2;border-color:var(--azul-prof)}
.btn.negro:hover{background:var(--negro-2);color:#fff;border-color:var(--negro-2)}
.btn.verde{background:var(--verde);border-color:var(--verde);color:#fff}
.btn.verde:hover{background:#166341;border-color:#166341;color:#fff}
.btn.rojo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn.rojo:hover{background:#952d24;border-color:#952d24;color:#fff}
.btn.chico{padding:.28rem .6rem;font-size:.79rem}
.acciones{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}

/* =================== BADGES / ALERTAS =================== */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.14rem .55rem;
  border-radius:99px;font-size:.735rem;font-weight:600;white-space:nowrap}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.75}
.badge.azul{background:var(--azul-claro);color:#7a5f0c}
.badge.verde{background:var(--verde-bg);color:#0b6b4a}
.badge.rojo{background:var(--rojo-bg);color:#a72a21}
.badge.amar{background:var(--amar-bg);color:#8a5c06}
.badge.gris{background:#f1eee6;color:#6b6559}

.alerta{padding:.7rem 1rem;border-radius:var(--radio-sm);margin-bottom:1.1rem;
  font-size:.88rem;border:1px solid;display:flex;gap:.6rem;align-items:flex-start}
.alerta.ok{background:var(--verde-bg);border-color:#b7e4d0;color:#0b5c40}
.alerta.error{background:var(--rojo-bg);border-color:#f6c9c5;color:#8f241c}
.alerta.info{background:var(--info-bg);border-color:#e6d9ab;color:#6d5509}
.alerta-clinica{background:#fff8ed;border:1px solid #f7d9a8;color:#8a5207;
  padding:.7rem 1rem;border-radius:var(--radio-sm);margin-bottom:1.1rem;font-size:.87rem}

/* =================== LOGIN =================== */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-arte{background:linear-gradient(155deg,#1b1b21,#0f0f12 55%,#080809);
  color:#fff;padding:3rem;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.login-arte::after{content:'';position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.16),transparent 68%);right:-150px;bottom:-160px}
.login-arte::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.13),transparent 70%);left:-90px;top:-70px}
.login-arte h2{font-size:1.85rem;font-weight:650;margin:0 0 .8rem;letter-spacing:-.5px;
  position:relative;z-index:1;color:#fff}
.login-arte p{color:#a8a292;max-width:370px;position:relative;z-index:1;line-height:1.65}
.login-arte ul{list-style:none;padding:0;margin:1.8rem 0 0;position:relative;z-index:1}
.login-arte li{display:flex;gap:.65rem;align-items:center;margin-bottom:.7rem;
  color:#ccc5b3;font-size:.9rem}
.login-panel{display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--panel)}
.login-caja{width:100%;max-width:360px}
.login-caja .logo-g{width:46px;height:46px;border-radius:12px;
  background:linear-gradient(145deg,#e6cd7a,#b8901c);
  display:grid;place-items:center;color:#17150e;font-weight:700;font-size:19px;margin-bottom:1.1rem;
  box-shadow:0 2px 14px rgba(201,162,39,.3)}
.login-caja h1{font-size:1.45rem;margin-bottom:.3rem}
.login-caja .btn{width:100%;padding:.62rem;font-size:.92rem;margin-top:.3rem}

/* =================== FICHA DE PACIENTE =================== */
.pestanas{display:flex;gap:.15rem;border-bottom:1px solid var(--borde);
  margin-bottom:1.15rem;flex-wrap:wrap}
.pestanas a{padding:.6rem .9rem;color:var(--texto-3);font-size:.865rem;font-weight:550;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.pestanas a:hover{color:var(--texto);text-decoration:none}
.pestanas a.activo{color:#7a5f0c;border-bottom-color:#b8901c;font-weight:600}

.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1rem .9rem}
.dato .et{font-size:.7rem;color:var(--texto-3);text-transform:uppercase;
  letter-spacing:.6px;font-weight:600;margin-bottom:.1rem}
.dato .vl{font-weight:550;font-size:.92rem}

.evolucion{position:relative;padding:0 0 1.3rem 1.5rem;border-left:2px solid var(--borde)}
.evolucion:last-child{border-left-color:transparent;padding-bottom:0}
.evolucion::before{content:'';position:absolute;left:-6px;top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--acento);border:2px solid var(--panel);
  box-shadow:0 0 0 2px var(--azul-claro)}
.evolucion .cab{font-size:.82rem;color:var(--texto-3);margin-bottom:.45rem;
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.evolucion .cab b{color:var(--texto);font-weight:600}
.soap b{display:block;font-size:.68rem;color:#7a5f0c;text-transform:uppercase;
  letter-spacing:.7px;font-weight:700;margin-top:.6rem}
.soap p{margin:.1rem 0 .5rem;white-space:pre-wrap;font-size:.9rem}
.signos{display:flex;gap:.45rem;flex-wrap:wrap;margin:.3rem 0 .5rem}
.signo{background:var(--fondo);border:1px solid var(--borde-2);border-radius:var(--radio-sm);
  padding:.2rem .55rem;font-size:.78rem;color:var(--texto-2)}
.signo b{color:var(--texto);font-weight:600}

/* =================== AGENDA =================== */
.slot{display:flex;gap:.85rem;align-items:center;padding:.6rem .8rem;
  border:1px solid var(--borde);border-radius:var(--radio-sm);margin-bottom:.4rem;
  background:var(--panel);transition:box-shadow .12s,border-color .12s}
.slot:hover{box-shadow:var(--sombra-md);border-color:#d8cfb8;text-decoration:none}
.slot .hora{font-weight:650;color:#7a5f0c;min-width:50px;font-size:.92rem;
  font-variant-numeric:tabular-nums}
.slot.libre{background:transparent;border-style:dashed;border-color:var(--borde);
  color:var(--texto-3);padding:.42rem .8rem}
.slot.libre:hover{background:var(--azul-suave);box-shadow:none}

.paginacion{display:flex;gap:.25rem;margin-top:1.1rem;flex-wrap:wrap}
.paginacion a{padding:.32rem .65rem;border:1px solid var(--borde);border-radius:var(--radio-sm);
  background:var(--panel);font-size:.85rem;color:var(--texto-2)}
.paginacion a:hover{background:var(--fondo);text-decoration:none}
.paginacion a.activa{background:var(--azul-prof);color:var(--acento-claro);
  border-color:var(--azul-prof);font-weight:600}

/* Barra de progreso (reportes) */
.barrita{background:var(--borde-2);border-radius:99px;height:7px;overflow:hidden}
.barrita > span{display:block;height:100%;
  background:linear-gradient(90deg,#b8901c,#d4ae2e);border-radius:99px}

/* =================== RESPONSIVE =================== */
.velo{display:none;position:fixed;inset:0;background:rgba(10,10,12,.55);z-index:35}
@media(max-width:1100px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .g2,.g3{grid-template-columns:1fr}
  .f3,.f4{grid-template-columns:1fr 1fr}
  .login-wrap{grid-template-columns:1fr}
  .login-arte{display:none}
}
@media(max-width:820px){
  .lateral{transform:translateX(-100%);transition:transform .22s ease}
  body.nav-abierto .lateral{transform:none;box-shadow:8px 0 28px rgba(0,0,0,.28)}
  body.nav-abierto .velo{display:block}
  .marco{margin-left:0}
  .hamburguesa{display:block}
  .solo-movil{display:block}
  .barra{padding:.6rem .9rem}
  .barra .buscador{display:none}
  .contenido{padding:1.1rem .9rem 3rem}
  .g4{grid-template-columns:1fr 1fr}
  .f2,.f3,.f4{grid-template-columns:1fr}
  .tabla-wrap{margin:0 -1.15rem;padding:0 1.15rem}
  th,td{padding:.5rem .45rem;font-size:.86rem}
}
@media(max-width:420px){ .g4{grid-template-columns:1fr} }

/* =================== IMPRESIÓN =================== */
@media print{
  .lateral,.barra,.pie,.acciones,.pestanas,.no-imprimir,.velo{display:none!important}
  .marco{margin-left:0}
  body{background:#fff;font-size:11pt}
  .contenido{padding:0;max-width:none}
  .tarjeta{border:0;box-shadow:none;padding:0;margin-bottom:.8rem}
  table{font-size:10pt}
  a{color:#000;text-decoration:none}
}

/* =================== DICTADO POR VOZ =================== */
.etiqueta-mic{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mic{background:var(--panel);border:1px solid var(--borde);color:var(--texto-2);
  width:30px;height:26px;border-radius:var(--radio-sm);cursor:pointer;
  display:grid;place-items:center;padding:0;transition:all .13s;flex:none}
.mic:hover{background:var(--azul-claro);border-color:#d8cfb8;color:#7a5f0c}
.mic:disabled{opacity:.4;cursor:not-allowed}
.mic.dictando{background:var(--rojo);border-color:var(--rojo);color:#fff;
  animation:latido 1.3s ease-in-out infinite}
@keyframes latido{
  0%,100%{box-shadow:0 0 0 0 rgba(179,57,46,.45)}
  50%{box-shadow:0 0 0 6px rgba(179,57,46,0)}
}
@media (prefers-reduced-motion:reduce){ .mic.dictando{animation:none} }
textarea.campo-dictando,input.campo-dictando{border-color:var(--rojo);
  box-shadow:0 0 0 3px rgba(179,57,46,.12)}
.dictado-barra{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  background:var(--azul-claro);border:1px solid #e6d9ab;border-radius:var(--radio-sm);
  padding:.6rem .8rem;margin-bottom:1rem;font-size:.85rem;color:#6d5509}
.dictado-barra b{color:#5a4507}
#dictado-estado{font-size:.82rem;color:var(--rojo);font-weight:550;margin-top:.3rem}

/* =================== FOTOS DE PACIENTE =================== */
.avatar-pac{border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;
  flex:none;background:var(--azul-claro);color:#7a5f0c;font-weight:650;
  border:1px solid var(--borde);overflow:hidden;vertical-align:middle}
.avatar-pac.sin-foto{background:linear-gradient(145deg,#f7f1de,#ece2c4);letter-spacing:.5px}
td .avatar-pac{border-color:var(--borde-2)}
.foto-campo{display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap;
  background:var(--fondo);border:1px solid var(--borde-2);border-radius:var(--radio-sm);
  padding:1rem;margin-bottom:1rem}
.foto-campo input[type=file]{background:var(--panel)}

/* =================== GRABACIÓN CON IA =================== */
.grabador{border:1px solid #e6d9ab;background:linear-gradient(180deg,#fdfaf0,#faf6e8);
  border-radius:var(--radio);padding:1rem;margin-bottom:1.1rem}
.grab-cab{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.grab-crono{font-variant-numeric:tabular-nums;font-size:1.1rem;font-weight:650;
  color:var(--texto-2);min-width:52px}
.grabador.grabando{border-color:var(--rojo);background:linear-gradient(180deg,#fdf0ef,#fbeceb)}
.grabador.grabando .grab-crono{color:var(--rojo)}
.grabador.grabando #btn-grabar{background:var(--rojo);border-color:var(--rojo);color:#fff;
  animation:latido 1.3s ease-in-out infinite}
.grabador.procesando{opacity:.85}
.grab-campos{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}
.grab-campo{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio-sm);padding:.7rem .85rem}
.grab-campo b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.7px;
  color:#7a5f0c;margin-bottom:.25rem}
.grab-campo p{margin:.1rem 0 .6rem;white-space:pre-wrap;font-size:.9rem}
@media(max-width:820px){ .grab-campos{grid-template-columns:1fr} }

/* =================== SERVICIOS Y PRECIOS =================== */
.precio-campo{display:flex;align-items:center;gap:.3rem}
.precio-campo span{color:var(--texto-3);font-weight:600}
.precio-campo input{text-align:right;font-variant-numeric:tabular-nums}
.precio-campo input:placeholder-shown{text-align:left;font-style:italic}

/* Agenda por semana / quincena / mes */
.dia-agenda{padding:.9rem 1rem}
.dia-agenda .slot{padding:.45rem .2rem}
.dia-agenda.es-hoy{border-color:#b8901c;box-shadow:0 0 0 1px #b8901c inset}
.fila-dia td{background:var(--fondo);border-top:1px solid var(--borde);
  font-size:.82rem;letter-spacing:.02em;padding-top:.6rem}
.alerta.amar{background:var(--amar-bg);border-color:#f0d9ac;color:#7a5406}