/* Capa Meivet sobre el sistema de diseño activo.
   Modo oscuro = Nocturne · modo claro = Modernist. Cada modo carga su propia hoja
   del sistema de diseño; estas variables son solo los tonos de soporte y el
   sistema semántico (correcto / advertencia / crítico), que es aparte del color
   de marca.

   Portada del bloque <style> de `referencia/Panel Meivet.dc.html`. Los valores
   del tema CLARO son los del prototipo, sin tocar. Los del tema OSCURO se
   derivaron de la rampa propia de Nocturne: en el prototipo se autorreferencian
   (`--mv-panel: var(--mv-panel)`) o solo existían en el bloque claro, de modo
   que 289 de los 354 usos quedaban sin valor. Cada token toma aquí el papel que
   cumple en claro, con el contraste verificado y anotado. */

[data-tema="oscuro"] {
  --sem-ok: #5fb894;
  --sem-warn: #d8a75f;
  --sem-crit: #e2725f;
  --sem-done: #7f92c8;
  --sem-muted: #75798c;

  /* Texto: la rampa neutral cambia de sentido entre temas — en claro el texto
     secundario sale del extremo oscuro y en oscuro del extremo claro. Por eso
     existe `--mv-text-*` y no se usa `--color-neutral-*` directo. */
  --mv-text-2: var(--color-neutral-300); /* 11.82:1 sobre el fondo */
  --mv-text-3: var(--color-neutral-400); /*  8.75:1 */
  --mv-text-4: var(--color-neutral-500); /*  6.08:1 */
  --mv-text-5: var(--color-neutral-500); /*  6.08:1 */

  /* Superficies. En oscuro se eleva aclarando, al revés que en claro. */
  --mv-panel: var(--color-surface);
  /* Un escalón por debajo del panel, que es el papel que cumple en claro. Se usa
     `--color-bg` y no `--color-neutral-900` porque la separación panel↔panel-2
     tiene que verse: la trama de «fuera de jornada» de la agenda se construye
     con esos dos tonos, y con neutral-900 la separación era de 1.07, invisible.
     Con el fondo queda en 1.16, comparable al 1.13 del tema claro. */
  --mv-panel-2: var(--color-bg);
  --mv-stripe-2: color-mix(in srgb, var(--color-text) 4%, transparent);
  --mv-sidebar: var(--color-surface);
  --mv-exp-head: var(--color-bg);
  --mv-hero: var(--color-surface);

  --mv-track: var(--color-neutral-900);
  --mv-thumb: var(--color-neutral-800);
  --mv-hairline: var(--color-divider);
  --mv-hover: color-mix(in srgb, var(--color-text) 7%, transparent);

  --mv-fill-soft: var(--color-neutral-900);
  --mv-fill-soft-2: var(--color-neutral-800);
  --mv-fill-soft-fg: var(--color-neutral-200); /* 11.49:1 sobre fill-soft */
  --mv-fill-soft-edge: var(--color-neutral-800);

  --mv-tint: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --mv-slot-hover: rgba(145, 132, 217, 0.14);
  --mv-on-accent: var(--color-bg); /* 5.45:1 sobre el acento */
  --mv-allergy-fg: #f0a396; /* 7.51:1 sobre el panel */
  --mv-exc-a: #3a2a2e;
  --mv-exc-b: #332529;

  --mv-circle: 50%;
  --mv-r: 4px;
  --mv-rule: 1px;
  --mv-btn-justify: center;
}

[data-tema="claro"] {
  --sem-ok: #245f45;
  --sem-warn: #7a5700;
  --sem-crit: #9c1500;
  --sem-done: #2d2b2b;
  --sem-muted: #605d5d;

  --mv-text-2: var(--color-neutral-800);
  --mv-text-3: var(--color-neutral-700);
  --mv-text-4: var(--color-neutral-700);
  --mv-text-5: var(--color-neutral-700);

  --mv-panel: #eae9e9;
  --mv-panel-2: #dedcdc;
  --mv-stripe-2: #e4e2e2;
  --mv-sidebar: var(--color-surface);
  --mv-exp-head: var(--color-bg);
  --mv-hero: var(--color-surface);

  --mv-track: #d7d3d3;
  --mv-thumb: #bab6b6;
  --mv-hairline: rgba(32, 30, 29, 0.14);
  --mv-hover: rgba(32, 30, 29, 0.05);

  --mv-fill-soft: var(--color-neutral-200);
  --mv-fill-soft-2: var(--color-neutral-300);
  --mv-fill-soft-fg: var(--color-neutral-800);
  --mv-fill-soft-edge: var(--color-neutral-300);

  --mv-tint: rgba(236, 48, 19, 0.08);
  --mv-slot-hover: rgba(236, 48, 19, 0.1);
  --mv-on-accent: #fff2ef;
  --mv-allergy-fg: #7c1405;
  --mv-exc-a: #f0d9d5;
  --mv-exc-b: #e2c9c4;

  --mv-circle: 0;
  --mv-r: 0;
  --mv-rule: 2px;
  --mv-btn-justify: flex-start;
}

body {
  margin: 0;
  overflow: hidden;
}

.mv-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.mv-scroll::-webkit-scrollbar-thumb {
  background: var(--mv-thumb);
  border-radius: var(--mv-r);
  border: 3px solid var(--color-bg);
}
.mv-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.mv-row:hover {
  background: var(--mv-hover);
}
.mv-navitem:hover {
  background: var(--mv-hover);
}
.mv-slot:hover {
  background: var(--mv-slot-hover) !important;
  box-shadow: inset 0 0 0 var(--mv-rule) var(--color-accent);
}

/* Modernist prescribe iconos Lucide y nada decorado: en claro la interfaz va sin
   iconos, con las etiquetas alineadas a la izquierda y las reglas cargando la
   estructura. */
[data-tema="claro"] i[class*='ph-'] {
  display: none;
}
[data-tema="claro"] .btn {
  justify-content: flex-start;
}
[data-tema="claro"] .card {
  border-top: 2px solid var(--color-text);
}

@keyframes mv-pulso {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.85;
  }
}
.mv-esq {
  animation: mv-pulso 1.15s ease-in-out infinite;
  background: var(--mv-panel);
  border-radius: var(--radius-md);
}

.mv-skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 80;
  transform: translateY(-160%);
  transition: transform 0.12s;
}
.mv-skip:focus {
  transform: translateY(0);
}

.seg button.seg-opt {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* doc 05 §7 · el panel se diseña para 1366–1920. Por debajo de 1200 no se
   esconden datos: la barra pasa a rieles de iconos, las columnas laterales caen
   debajo y las tablas anchas se desplazan en horizontal antes de comprimir el
   texto. */
@media (max-width: 1199px) {
  .mv-shell {
    grid-template-columns: 62px 1fr !important;
  }
  .mv-brand-txt,
  .mv-navlabel,
  .mv-userinfo,
  .mv-fecha {
    display: none !important;
  }
  .mv-navitem,
  .mv-userbtn {
    justify-content: center !important;
  }
  /* Modernist no pinta iconos: en claro el riel conserva la etiqueta, que es lo
     único que queda. */
  [data-tema="claro"] .mv-shell {
    grid-template-columns: 150px 1fr !important;
  }
  [data-tema="claro"] .mv-navlabel {
    display: block !important;
    font-size: 12.5px;
  }
  [data-tema="claro"] .mv-navitem,
  [data-tema="claro"] .mv-userbtn {
    justify-content: flex-start !important;
  }
  [data-tema="claro"] .mv-userinfo {
    display: block !important;
  }
  .mv-2col {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .mv-cards4,
  .mv-cards3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .mv-content {
    padding: var(--space-4) !important;
  }
  .mv-hscroll {
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .mv-hscroll > table {
    min-width: 940px;
  }
  .mv-hscroll > div {
    min-width: 880px;
  }
}

@media (max-width: 900px) {
  .mv-cards4,
  .mv-cards3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .mv-hd {
    flex-wrap: wrap;
    row-gap: 9px;
  }
}

/* Consulta en modo tableta (doc 05 §4.5).

   El veterinario escribe la consulta en el consultorio, con el animal delante y
   tocando con el dedo. 46 px es el alto mínimo con el que un campo se acierta
   sin mirar; con los 36 px del escritorio se falla y se corrige, que con las
   manos ocupadas es peor que escribir despacio. Va en hoja de estilo y no en
   estilos en línea porque tiene que alcanzar a todos los campos de las siete
   secciones, incluidos los de las tablas. */
.mv-tableta .input,
.mv-tableta input,
.mv-tableta select,
.mv-tableta textarea {
  min-height: 46px;
  font-size: 15px;
}
.mv-tableta textarea,
.mv-tableta textarea.input {
  min-height: 104px;
}