/* ==========================================================================
   VetCarnet: acceso y panel de la clínica.
   Hereda de estilos.css la paleta, los radios y el tema claro u oscuro.
   ========================================================================== */

body { min-height: 100dvh; }

/* ==========================================================================
   Pantalla de acceso
   ========================================================================== */
.acceso { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }

.acceso-marca {
  background: var(--pino-900); color: #fff;
  padding: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.acceso-marca > * { position: relative; z-index: 1; }
.acceso-marca img.fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .22; z-index: 0;
}
.acceso-marca .marca { color: #fff; }
.acceso-marca h1 { font-size: clamp(1.8rem, 2.6vw, 2.5rem); max-width: 15ch; margin-bottom: 14px; }
.acceso-marca p { color: rgb(255 255 255 / .78); max-width: 40ch; }
.acceso-pie { font-size: .87rem; color: rgb(255 255 255 / .6); }
.acceso-pie a { color: #fff; }

.acceso-panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 4vw, 56px) 24px; background: var(--hueso);
}
.acceso-caja { width: 100%; max-width: 400px; }
.acceso-caja h2 { font-size: 1.7rem; margin-bottom: 8px; }
.acceso-caja > p.plomo { margin-bottom: 26px; font-size: 1rem; }

.volver {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .9rem; color: var(--tinta-suave); text-decoration: none;
  margin-bottom: 22px; background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit;
}
.volver:hover { color: var(--tinta); }

.acceso-ayuda { margin-top: 22px; font-size: .89rem; color: var(--tinta-suave); text-align: center; }
.acceso-ayuda a { color: var(--acento-800); font-weight: 560; }
@media (prefers-color-scheme: dark) { .acceso-ayuda a { color: var(--acento); } }

.demo {
  margin-top: 24px; padding: 16px 18px;
  border: 1px dashed var(--borde); border-radius: var(--radio-campo);
  font-size: .84rem; color: var(--tinta-suave);
}
.demo strong { color: var(--tinta); font-weight: 600; display: block; margin-bottom: 8px; font-size: .87rem; }
.demo button {
  font: inherit; font-size: .84rem; background: none; border: 0; padding: 3px 0;
  color: var(--acento-800); cursor: pointer; text-align: left; text-decoration: underline;
}
@media (prefers-color-scheme: dark) { .demo button { color: var(--acento); } }
.demo button:hover { color: var(--tinta); }
.demo-nota {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--borde);
  font-size: .8rem; line-height: 1.5;
}

@media (max-width: 900px) {
  .acceso { grid-template-columns: 1fr; }
  .acceso-marca { display: none; }
  .acceso-panel { min-height: 100dvh; align-items: flex-start; padding-top: 34px; }
}

/* ==========================================================================
   Estructura del panel
   ========================================================================== */
.panel { display: none; }
body[data-sesion="si"] .acceso { display: none; }
body[data-sesion="si"] .panel { display: block; }

.panel-barra {
  position: sticky; top: 0; z-index: 30;
  background: var(--pino-900); color: #fff; padding: 12px 0;
}
.panel-barra-inner {
  width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; gap: 14px;
}
.panel-barra .marca { color: #fff; }
.panel-usuario { margin-left: auto; text-align: right; line-height: 1.3; }
.panel-usuario strong { display: block; font-size: .93rem; font-weight: 600; }
.panel-usuario span { font-size: .8rem; color: rgb(255 255 255 / .66); }
.panel-salir {
  font: inherit; font-size: .88rem; font-weight: 560;
  background: rgb(255 255 255 / .12); color: #fff;
  border: 1px solid rgb(255 255 255 / .22); border-radius: var(--radio-boton);
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.panel-salir:hover { background: rgb(255 255 255 / .2); }

.panel-menu { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }

/* Aviso permanente de las cuentas vitrina. */
.bandera-demo {
  background: var(--acento-50);
  border-bottom: 1px solid color-mix(in srgb, var(--acento) 38%, transparent);
  color: var(--tinta); font-size: .89rem; line-height: 1.5;
  padding: 12px 24px; text-align: center;
}
.bandera-demo strong { color: var(--acento-800); font-weight: 650; }
@media (prefers-color-scheme: dark) { .bandera-demo strong { color: var(--acento); } }
.bandera-enlace {
  display: inline-block; margin-left: 8px; font-weight: 600;
  color: var(--acento-800); text-underline-offset: 3px;
}
@media (prefers-color-scheme: dark) { .bandera-enlace { color: var(--acento); } }

/* Modo soporte. Va en pino sólido y no en un tono suave: el dueño del SaaS
   está tocando datos de un cliente y no debe olvidarlo. */
.bandera-soporte {
  position: sticky; top: 62px; z-index: 28;
  background: var(--pino); color: #fff;
  font-size: .89rem; line-height: 1.5;
  padding: 11px 24px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.bandera-soporte strong {
  background: rgb(255 255 255 / .18); padding: 3px 10px; border-radius: var(--radio-boton);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.bandera-soporte span { color: rgb(255 255 255 / .88); }
.bandera-boton {
  font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--pino-900); border: 0;
  border-radius: var(--radio-boton); padding: 7px 15px; white-space: nowrap;
}
.bandera-boton:hover { background: #eef4f2; }

.panel-marco {
  width: 100%; max-width: 1440px; margin-inline: auto;
  display: grid; grid-template-columns: 216px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 3vw, 32px) 24px 70px;
  align-items: start;
}

/* ---------- Menú lateral -------------------------------------------------- */
.panel-menu-lateral {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 84px;
}
.menu-item {
  font: inherit; font-size: .96rem; font-weight: 540; text-align: left;
  background: none; border: 0; cursor: pointer;
  padding: 11px 14px; border-radius: var(--radio-campo);
  color: var(--tinta-suave); transition: background-color .14s, color .14s;
}
.menu-item:hover { background: var(--pino-50); color: var(--tinta); }
.menu-item[data-activo="si"] { background: var(--pino); color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .panel-menu { display: block; }
  .panel-usuario { display: none; }
  .panel-marco { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .panel-menu-lateral {
    position: fixed; inset: 62px 0 auto; z-index: 25;
    background: var(--papel); border-bottom: 1px solid var(--borde);
    padding: 12px 20px 18px; box-shadow: var(--sombra-m); display: none;
  }
  body[data-menu="si"] .panel-menu-lateral { display: flex; }
}

/* ---------- Cabecera del contenido --------------------------------------- */
.panel-cuerpo { min-width: 0; }
.panel-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 5px; }
.panel-titulo h1 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.etiqueta-plan {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 5px 11px; border-radius: var(--radio-boton);
  background: var(--pino-50); color: var(--pino);
}
@media (prefers-color-scheme: dark) { .etiqueta-plan { color: var(--pino-400); } }
.panel-sub { color: var(--tinta-suave); margin-bottom: 26px; font-size: .95rem; }

.aviso-suscripcion {
  border-radius: var(--radio-tarjeta); padding: 20px 22px; margin-bottom: 26px;
  background: var(--acento-50); border: 1px solid color-mix(in srgb, var(--acento) 34%, transparent);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.aviso-suscripcion div { flex: 1 1 260px; }
.aviso-suscripcion h3 { font-size: 1.05rem; margin-bottom: 5px; color: var(--acento-800); }
@media (prefers-color-scheme: dark) { .aviso-suscripcion h3 { color: var(--acento); } }
.aviso-suscripcion p { font-size: .93rem; color: var(--tinta-suave); }

/* ---------- Cabeceras de sección ----------------------------------------- */
.seccion-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.seccion-cabeza h2 { font-size: 1.18rem; margin-bottom: 3px; }
.seccion-cabeza p { color: var(--tinta-suave); font-size: .92rem; max-width: 62ch; }
.acciones-cabeza { display: flex; gap: 9px; flex-wrap: wrap; }
.seccion-cabeza .boton { padding: 11px 18px; font-size: .93rem; }
.panel-seccion { margin-bottom: 34px; }
@media (max-width: 620px) {
  .acciones-cabeza { width: 100%; }
  .acciones-cabeza .boton, .acciones-cabeza select { flex: 1 1 auto; }
}

/* ---------- Métricas ------------------------------------------------------ */
.metricas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
  background: var(--borde); border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta); overflow: hidden; margin-bottom: 32px;
}
.metrica { background: var(--papel); padding: 19px 20px; text-align: left; border: 0; }
.metrica strong {
  display: block; font-size: 1.9rem; font-weight: 640; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 6px; color: var(--tinta);
}
.metrica span { font-size: .86rem; color: var(--tinta-suave); }
.metrica--alerta strong { color: var(--acento-800); }
@media (prefers-color-scheme: dark) { .metrica--alerta strong { color: var(--acento); } }
.metrica--pulsable { cursor: pointer; font: inherit; transition: background-color .14s; }
.metrica--pulsable:hover { background: var(--pino-50); }

/* ---------- Buscador y filtros -------------------------------------------- */
.buscador { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.buscador input, .buscador select, .acciones-cabeza select {
  font: inherit; font-size: .95rem; padding: 11px 14px;
  border-radius: var(--radio-campo); border: 1.5px solid var(--borde);
  background: var(--papel); color: var(--tinta);
}
.buscador input { flex: 1 1 240px; }
.buscador input::placeholder { color: #7d918e; }
@media (prefers-color-scheme: dark) { .buscador input::placeholder { color: #7f938f; } }
.buscador input:focus, .buscador select:focus, .acciones-cabeza select:focus {
  outline: 0; border-color: var(--pino-400); box-shadow: 0 0 0 3px var(--pino-50);
}

/* ---------- Tablas -------------------------------------------------------- */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tinta-suave); font-weight: 700; padding: 0 14px 10px; white-space: nowrap;
}
.tabla td { padding: 12px 14px; border-top: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr[data-pulsable="si"] { cursor: pointer; }
.tabla tbody tr:hover { background: var(--papel); }
.tabla tbody tr:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.tabla .nombre { font-weight: 600; }
.tabla .apagado { color: var(--tinta-suave); }
.tabla .ancho { max-width: 34ch; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.acciones-fila { display: inline-flex; gap: 14px; }
.pie-tabla { margin-top: 12px; font-size: .85rem; color: var(--tinta-suave); }
/* Segunda línea dentro de una celda, para el contacto bajo el nombre. */
.sub-linea { font-size: .82rem; margin-top: 2px; }

.enlace-tabla {
  font: inherit; font-size: .87rem; font-weight: 560; background: none; border: 0;
  cursor: pointer; color: var(--acento-800); padding: 0;
  border-bottom: 1px solid currentColor;
}
@media (prefers-color-scheme: dark) { .enlace-tabla { color: var(--acento); } }
.enlace-tabla:hover { color: var(--tinta); }

.select-linea {
  font: inherit; font-size: .87rem; padding: 6px 9px;
  border-radius: 9px; border: 1px solid var(--borde);
  background: var(--papel); color: var(--tinta); max-width: 160px;
}

/* ---------- Pastillas ----------------------------------------------------- */
.pastilla {
  display: inline-block; font-size: .78rem; font-weight: 620;
  padding: 4px 10px; border-radius: var(--radio-boton); white-space: nowrap;
}
.pastilla--neutro { background: var(--pino-50); color: var(--pino); }
.pastilla--ok { background: #eaf7f0; color: #1d6d4c; }
.pastilla--aviso { background: #fef4e0; color: #8a5a15; }
.pastilla--alerta { background: var(--acento-50); color: var(--acento-800); }
@media (prefers-color-scheme: dark) {
  .pastilla--neutro { color: var(--pino-400); }
  .pastilla--ok { background: #12302a; color: #6fc79b; }
  .pastilla--aviso { background: #33260f; color: #e0b055; }
  .pastilla--alerta { color: var(--acento); }
}

/* ---------- Fichas de datos ----------------------------------------------- */
.rejilla-fichas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px; margin-bottom: 32px;
}
.ficha {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta); padding: 20px 22px;
}
.ficha h3 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-suave); font-weight: 700; margin-bottom: 14px;
}
.fila-dato {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: .92rem;
}
.fila-dato:last-child { border-bottom: 0; padding-bottom: 0; }

/* Pagar el plan que ya se tiene. Solo aparece con la suscripción caída, así que
   cierra la ficha en lugar de competir con los datos de arriba. */
.ficha-cobro { display: grid; gap: 10px; margin-top: 18px; }
.ficha-cobro .boton { width: 100%; }
.fila-dato dt { color: var(--tinta-suave); flex-shrink: 0; }
.fila-dato dd { font-weight: 560; text-align: right; word-break: break-word; }

.ficha-cabeza {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap; margin-bottom: 24px;
}

/* Confirmación del dueño elegido dentro del alta de paciente. */
.dueno-elegido {
  display: grid; gap: 3px; margin-top: 10px;
  padding: 12px 14px; border-radius: var(--radio-campo);
  background: var(--pino-50); border: 1px solid var(--borde);
}
.dueno-elegido strong { font-size: .95rem; }
.dueno-elegido span { font-size: .86rem; color: var(--tinta-suave); }
.dueno-elegido .dueno-aviso { color: var(--acento-800); font-weight: 560; }
@media (prefers-color-scheme: dark) { .dueno-elegido .dueno-aviso { color: var(--acento); } }

/* ---------- Saldo de un frasco -------------------------------------------- */
.saldo { display: grid; gap: 5px; min-width: 150px; }
.saldo-texto { font-size: .88rem; font-variant-numeric: tabular-nums; }
.saldo-barra {
  display: block; height: 6px; border-radius: 999px;
  background: var(--borde); overflow: hidden;
}
.saldo-relleno { display: block; height: 100%; background: var(--pino); border-radius: 999px; }
.saldo-relleno--bajo { background: var(--acento); }

/* Frases de cierre del reporte de consumo. */
.resumenes {
  display: grid; gap: 8px; margin: 20px 0;
  padding: 16px 18px; border-radius: var(--radio-campo);
  background: var(--pino-50); border: 1px solid var(--borde);
}
.resumen-linea { font-size: .94rem; line-height: 1.55; }
.sub-titulo {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tinta-suave); font-weight: 700; margin: 26px 0 12px;
}

/* Un dato de ayuda que se vuelve advertencia, como al pasarse del saldo. */
.campo-ayuda[data-alerta="si"] { color: var(--acento-800); font-weight: 560; }
@media (prefers-color-scheme: dark) { .campo-ayuda[data-alerta="si"] { color: var(--acento); } }

/* ---------- Jaulas -------------------------------------------------------- */
.rejilla-jaulas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.jaula {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio-campo); padding: 14px 16px;
  display: grid; gap: 3px;
}
.jaula strong { font-size: 1.1rem; letter-spacing: -.02em; }
.jaula span { font-size: .82rem; color: var(--tinta-suave); }
.jaula-estado { font-weight: 560; }
.jaula--ocupada { border-color: color-mix(in srgb, var(--acento) 40%, transparent); background: var(--acento-50); }
.jaula--ocupada .jaula-estado { color: var(--acento-800); }
@media (prefers-color-scheme: dark) { .jaula--ocupada .jaula-estado { color: var(--acento); } }

/* ---------- Línea de tiempo de notas -------------------------------------- */
.linea-tiempo { display: grid; gap: 12px; }
.nota {
  border-left: 3px solid var(--pino-100); padding: 12px 0 12px 16px;
  display: grid; gap: 5px;
}
.nota header { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nota header strong { font-size: .95rem; }
.nota header span { font-size: .82rem; color: var(--tinta-suave); }
.nota p { font-size: .9rem; }
.nota-constantes { font-variant-numeric: tabular-nums; font-weight: 560; }
.nota-checks { color: var(--tinta-suave); font-size: .86rem; }
.nota .apagado { color: var(--tinta-suave); }

/* ---------- Planes en el panel -------------------------------------------- */
.rejilla-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.plan-panel {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta); padding: 22px; display: grid; gap: 10px; align-content: start;
}
.plan-panel--actual { border-color: var(--pino); box-shadow: 0 0 0 1px var(--pino); }
.plan-panel h3 { font-size: 1.15rem; }
.plan-panel-precio { font-size: 1.5rem; font-weight: 640; letter-spacing: -.03em; }
.plan-panel-lista { list-style: none; display: grid; gap: 6px; font-size: .89rem; color: var(--tinta-suave); }
.plan-panel-lista li::before { content: "· "; color: var(--acento); font-weight: 700; }

/* ---------- Estados ------------------------------------------------------- */
.esqueleto {
  display: grid; gap: 1px; background: var(--borde);
  border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); overflow: hidden;
}
.esqueleto div { background: var(--papel); height: 52px; position: relative; overflow: hidden; }
.esqueleto div::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pino-50) 70%, transparent), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .esqueleto div::after { animation: brillo 1.4s infinite; }
  @keyframes brillo { to { transform: translateX(100%); } }
}

.vacio-panel {
  text-align: center; padding: 40px 20px; color: var(--tinta-suave);
  border: 1px dashed var(--borde); border-radius: var(--radio-tarjeta);
}
.vacio-panel strong { display: block; color: var(--tinta); font-size: 1.02rem; margin-bottom: 6px; }
.vacio-panel p { max-width: 46ch; margin-inline: auto; font-size: .93rem; }
.vacio-panel .boton { margin-top: 18px; }
.vacio-panel--error { border-color: color-mix(in srgb, var(--acento) 40%, transparent); }

/* ---------- Avisos flotantes ---------------------------------------------- */
.avisos {
  position: fixed; z-index: 90; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: grid; gap: 8px; width: min(420px, calc(100vw - 32px));
}
.aviso {
  padding: 13px 18px; border-radius: var(--radio-campo);
  font-size: .92rem; font-weight: 540; box-shadow: var(--sombra-l);
  background: var(--pino-900); color: #fff;
}
.aviso--error { background: var(--acento-800); }
@media (prefers-reduced-motion: no-preference) {
  .aviso { animation: entrarAviso .26s cubic-bezier(.16, 1, .3, 1); }
  .aviso[data-saliendo="si"] { animation: salirAviso .3s forwards; }
  @keyframes entrarAviso { from { opacity: 0; transform: translateY(12px); } }
  @keyframes salirAviso { to { opacity: 0; transform: translateY(10px); } }
}

/* ==========================================================================
   Diálogos
   ========================================================================== */
.dialogo {
  /* El navegador centra un <dialog> modal con position:fixed, inset:0 y
     margin:auto. No se declara `position` aquí: pisarla lo saca de ese
     mecanismo y el diálogo se va a la esquina superior izquierda.
     El botón de cerrar se sigue posicionando contra el diálogo, porque un
     elemento fijo ya es bloque contenedor de sus descendientes absolutos. */
  margin: auto;
  width: min(680px, calc(100vw - 28px));
  max-height: min(88dvh, 940px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-l); overflow-y: auto;
}
.dialogo::backdrop { background: rgb(7 43 39 / .55); backdrop-filter: blur(3px); }
.dialogo h2 { font-size: 1.45rem; margin-bottom: 6px; padding-right: 42px; }
.dialogo-sub { color: var(--tinta-suave); font-size: .94rem; margin-bottom: 20px; }

.dialogo-cerrar { position: absolute; top: 16px; right: 16px; }
.dialogo-cerrar button {
  background: none; border: 0; cursor: pointer; padding: 6px;
  color: var(--tinta-suave); border-radius: 8px; display: grid; place-items: center;
}
.dialogo-cerrar button:hover { color: var(--tinta); background: var(--hueso); }

.dialogo fieldset { border: 0; padding: 0; margin-bottom: 20px; }
.dialogo legend {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--rotulo); padding: 0 0 11px; width: 100%;
  border-bottom: 1px solid var(--borde); margin-bottom: 15px;
}

.rejilla-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rejilla-campos [data-ancho="completo"] { grid-column: 1 / -1; }
@media (max-width: 560px) { .rejilla-campos { grid-template-columns: 1fr; } }

.rejilla-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 14px; }

.dialogo textarea {
  font: inherit; font-size: .96rem; padding: 11px 14px;
  border-radius: var(--radio-campo); border: 1.5px solid var(--borde);
  background: var(--hueso); color: var(--tinta); width: 100%; resize: vertical;
}
.dialogo textarea:focus { outline: 0; border-color: var(--pino-400); box-shadow: 0 0 0 3px var(--pino-50); }

.campo--check { flex-direction: row; align-items: center; gap: 10px; display: flex; margin-bottom: 14px; }
.campo--check input { width: 18px; height: 18px; accent-color: var(--pino); flex-shrink: 0; }
.campo--check span { font-size: .93rem; font-weight: 500; }

/* Interruptor con explicación debajo. La ayuda se sangra hasta donde empieza
   el texto de la etiqueta (18px de casilla + 10px de hueco). */
.campo--check-grupo { margin-bottom: 14px; }
.campo--check-grupo .campo--check { margin-bottom: 4px; }
.campo--check-grupo .campo-ayuda { margin-left: 28px; }

.dialogo-acciones {
  /* Con `flex-end` y sin envolver, el cuarto botón no ensancha el diálogo:
     empuja al primero fuera del borde izquierdo y lo deja cortado. */
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--borde); margin-top: 4px;
}
@media (max-width: 560px) {
  .dialogo-acciones { flex-direction: column-reverse; }
  .dialogo-acciones .boton { width: 100%; }
}

/* ---------- Carnet dentro del diálogo ------------------------------------- */
.carnet-listo { text-align: center; padding: 18px 0 6px; }
.qr-grande {
  width: 230px; height: 230px; margin: 0 auto;
  border-radius: var(--radio-campo); background: #fff; padding: 10px;
  border: 1px solid var(--borde);
}
.carnet-url {
  margin-top: 14px; font-size: .8rem; color: var(--tinta-suave);
  word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   Foto del paciente

   El retrato es cuadrado en todas partes —listado, expediente y carnet—
   porque el recorte lo decide el servidor al guardar. Aquí solo se escala.
   ========================================================================== */
.retrato-mascota {
  --lado: 88px;
  width: var(--lado); height: var(--lado); flex-shrink: 0;
  border-radius: calc(var(--lado) / 3.6);
  overflow: hidden; display: grid; place-items: center;
  background: var(--pino-50); border: 1px solid var(--borde);
}
.retrato-mascota img { width: 100%; height: 100%; object-fit: cover; display: block; }
.retrato-huella { font-size: calc(var(--lado) * .46); line-height: 1; opacity: .55; }

/* Retrato del expediente: se puede pulsar para cambiar la foto. */
.retrato-boton {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 24px; display: block;
}
.retrato-boton:focus-visible { outline: 2px solid var(--pino-400); outline-offset: 3px; }
.retrato-velo {
  position: absolute; inset: 0; border-radius: inherit;
  display: grid; place-items: center; color: #fff;
  background: rgb(7 43 39 / .55); opacity: 0; transition: opacity .15s;
}
.retrato-boton:hover .retrato-velo,
.retrato-boton:focus-visible .retrato-velo { opacity: 1; }

.ficha-identidad { display: flex; align-items: center; gap: 16px; min-width: 0; }
.celda-paciente { display: inline-flex; align-items: center; gap: 10px; }
.celda-paciente .retrato-mascota { border-radius: 10px; }

/* ---------- Control de captura -------------------------------------------- */
.campo-rotulo { font-size: .87rem; font-weight: 600; }

.foto-control { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.foto-control > div:last-child { flex: 1 1 240px; display: grid; gap: 10px; }
.foto-control--dialogo { margin: 4px 0 6px; }

.foto-vista {
  width: 132px; height: 132px; flex-shrink: 0; position: relative;
  border-radius: var(--radio-campo); overflow: hidden;
  display: grid; place-items: center;
  background: var(--hueso); border: 1.5px dashed var(--borde);
  font-size: 60px; line-height: 1;
}
.foto-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-vista .retrato-huella { font-size: 58px; }
.foto-vista[data-encima="si"] { border-color: var(--pino-400); background: var(--pino-50); }

/* Mientras sube, el retrato se apaga: es el único aviso que hace falta. */
.foto-vista[data-subiendo="si"] { opacity: .45; }
.foto-vista[data-subiendo="si"]::after {
  content: ""; position: absolute; inset: 0;
  border: 3px solid var(--pino-100); border-top-color: var(--pino);
  border-radius: 50%; width: 34px; height: 34px; margin: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .foto-vista[data-subiendo="si"]::after { animation: girar .8s linear infinite; }
  @keyframes girar { to { transform: rotate(360deg); } }
}

.foto-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.foto-acciones .boton { padding: 10px 16px; font-size: .89rem; }

.foto-espera { text-align: center; margin-top: 4px; }

/* ---------- Logotipo de la clínica ----------------------------------------
   Mismo esqueleto que la foto del paciente, con dos diferencias: el recuadro
   es más chico porque cabe dentro de una ficha, y la imagen se ajusta con
   `contain` en vez de recortarse — un logotipo ancho recortado no se lee. */
.logo-ficha { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.logo-ficha > div:last-child { flex: 1 1 190px; display: grid; gap: 9px; }
.logo-ficha-vista {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: var(--radio-campo); overflow: hidden;
  display: grid; place-items: center;
  background: var(--hueso); border: 1.5px dashed var(--borde);
  font-size: 34px; line-height: 1;
}
.logo-ficha-vista img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Cabecera de una ficha que además lleva una acción, como editar al dueño. */
.ficha-cabeza-mini {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.ficha-cabeza-mini h3 { margin: 0; }
.ficha-cabeza-mini .boton { padding: 6px 12px; font-size: .82rem; }

/* ---------- Interruptor de un ajuste --------------------------------------- */
.opcion-interruptor {
  display: flex; align-items: center; gap: 10px;
  font-size: .93rem; font-weight: 560; cursor: pointer; margin-bottom: 6px;
}
.opcion-interruptor input { width: 18px; height: 18px; accent-color: var(--pino); flex-shrink: 0; }
.opcion-interruptor input:disabled { cursor: progress; }

/* ---------- Cámara del equipo --------------------------------------------- */
.camara-marco {
  width: min(420px, 100%); aspect-ratio: 1; margin: 4px auto 14px;
  border-radius: var(--radio-tarjeta); overflow: hidden;
  background: var(--pino-900); display: grid; place-items: center;
}
.camara-marco video { width: 100%; height: 100%; object-fit: cover; display: block; }