/* ============================================================
   F2 — Componentes. Consume los tokens de la Capa A (01-tokens.css).

   Los COLORES ya los dan las capas A/B: aqui va lo que ningun token
   alcanza — la FORMA y las variantes que Metronic no tiene.

   Verificable en /estilos (solo Administrador).
   Fuente: DISEÑO/GLO REVISION/Guia_Identidad_Panel_Vozenter.md
   ============================================================ */

/* ============================================================
   BOTONES — guia §4. Las unicas 7 variantes permitidas.
   Especificacion: Inter 600 · 13.5px · padding 9px 16px ·
   radius --radius · icono 14px con gap 7px.
   ============================================================ */

.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-ghost,
.btn.btn-accent,
.btn.btn-danger,
.btn.btn-danger-soft {
  font-family: var(--vzt-font-cuerpo);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-width: 1px;
  border-style: solid;
}
.btn.btn-primary i, .btn.btn-secondary i, .btn.btn-ghost i,
.btn.btn-accent i, .btn.btn-danger i, .btn.btn-danger-soft i {
  font-size: 14px;
}

/* DISABLED — guia §4: "opacidad 45% + cursor:not-allowed. NUNCA cambia de
   color." Metronic SI cambia el color en disabled, por eso hace falta
   !important: hay que ganar a sus reglas .btn:disabled. */
.btn.btn-primary:disabled, .btn.btn-primary.disabled,
.btn.btn-secondary:disabled, .btn.btn-secondary.disabled,
.btn.btn-ghost:disabled, .btn.btn-ghost.disabled,
.btn.btn-accent:disabled, .btn.btn-accent.disabled,
.btn.btn-danger:disabled, .btn.btn-danger.disabled,
.btn.btn-danger-soft:disabled, .btn.btn-danger-soft.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn.btn-primary:disabled, .btn.btn-primary.disabled {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-fg) !important;
}
.btn.btn-accent:disabled, .btn.btn-accent.disabled {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg) !important;
}
.btn.btn-danger:disabled, .btn.btn-danger.disabled {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
  color: var(--danger-fg) !important;
}

/* btn-secondary — guia §4: fondo --card, texto --primary, borde --border.
   NO existe en Metronic (su .btn-secondary es un gris solido), asi que se
   redefine entera. Uso: Ver, Exportar, Reprogramar, Registrar cobro.

   POR QUE !important EN EL BORDE (medido, no supuesto): Metronic aplica
     .btn:not(.btn-outline):not(.btn-dashed):not(.btn-bordered)
        :not(.border-hover):not(.border-active):not(.btn-flush)
        :not(.btn-icon):not(.btn-hover-outline) { border: 0; }
   Cada :not() suma especificidad de clase -> esa regla vale (0,10,0) y
   aplasta cualquier selector razonable nuestro. Ademas es un SHORTHAND, asi
   que resetea border-width Y border-color a la vez (por eso el borde salia
   con currentColor navy en vez de --border).
   Replicar la cadena de 9 :not() seria peor de mantener que un !important. */
.btn.btn-secondary {
  background-color: var(--card);
  border: 1px solid var(--border) !important;
  color: var(--primary);
}
.btn.btn-secondary:hover:not(.btn-active):not(:disabled),
.btn.btn-secondary:focus:not(.btn-active):not(:disabled),
.btn.btn-secondary:active:not(.btn-active):not(:disabled) {
  background-color: var(--primary-soft);
  border-color: var(--border);
  color: var(--primary);
}

/* btn-ghost — guia §4: transparente, texto --muted -> --primary en hover.
   Uso: Cancelar, Volver, terciarias. No existe en Metronic. */
.btn.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn.btn-ghost:hover:not(:disabled),
.btn.btn-ghost:focus:not(:disabled),
.btn.btn-ghost:active:not(:disabled) {
  background-color: var(--primary-soft);
  color: var(--primary);
}

/* btn-accent — guia §4: solo confirmaciones de flujo (Confirmar, Completar).
   Ademas resuelve el boton "¿Necesitas ayuda?" del footer del sidebar, que
   con btn-primary quedaria azul marino sobre azul marino = invisible
   (decision E2 de F1). */
.btn.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn.btn-accent:hover:not(:disabled),
.btn.btn-accent:focus:not(:disabled),
.btn.btn-accent:active:not(:disabled) {
  background-color: #26b869;
  border-color: #26b869;
  color: var(--accent-fg);
}

/* btn-danger-soft — guia §4: destructivas SECUNDARIAS (Cancelar reserva,
   No asistio, Desvincular). No existe en Metronic. */
.btn.btn-danger-soft {
  background-color: var(--danger-soft);
  border-color: transparent;
  color: var(--danger);
}
.btn.btn-danger-soft:hover:not(:disabled),
.btn.btn-danger-soft:focus:not(:disabled),
.btn.btn-danger-soft:active:not(:disabled) {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--danger-fg);
}

/* iconbtn — guia §4/§8: accion de fila 32x32. Sustituye a los 5 patrones
   de columna "Acciones" que conviven hoy (auditoria C1). */
.iconbtn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.iconbtn:hover:not(:disabled) {
  color: var(--primary);
  border-color: var(--primary);
  background-color: var(--primary-soft);
}
.iconbtn.iconbtn-delete:hover:not(:disabled) {
  color: var(--danger);
  border-color: var(--danger);
  background-color: var(--danger-soft);
}
.iconbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   BADGES — guia §5. Pildora soft unica: 11px/700, radius 99px,
   padding 3px 9px. Dot opcional de 6px.
   Los COLORES los da la familia semantica de 02-puente-bs.css; aqui solo
   la FORMA, que ningun token alcanza (Metronic da radius 0.425rem y fw600).
   "Los badges solidos desaparecen" salvo el contador de notificaciones.
   ============================================================ */
.badge[class*="badge-light-"],
.badge.badge-primary,
.badge.badge-neutral {
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  line-height: 1.4;
}

/* ⚠ TRAMPA MEDIDA — .fw-bold de Metronic es 600, NO 700, y lleva !important:
       .fw-bold { font-weight: 600 !important; }   (style.bundle.css)
   Metronic redefinio la utilidad de Bootstrap a "semibold". Consecuencia: un
   badge cuyo markup lleve fw-bold (hay varios en el panel, p.ej.
   "badge badge-light-success fw-bold fs-8") se queda en 600 pese a esta regla
   — el !important gana a cualquier especificidad nuestra.
   NO se contraataca con otro !important: la solucion es QUITAR fw-bold del
   markup de los badges cuando se barra cada area (F2 Task 3 / olas). El peso
   lo debe dar la clase del badge, no una utilidad suelta. */

/* badge-primary — guia §5: metadatos y categorias (rol, "Virtual",
   "Esta reserva", "1 HOMBRE"). NO es un estado.
   Metronic ya tiene una .badge-primary SOLIDA: la nuestra es soft y debe
   ganarle, de ahi la especificidad .badge.badge-primary. */
.badge.badge-primary {
  background-color: var(--primary-soft);
  color: var(--primary);
}

/* badge-neutral — guia §5: borrador, cerrado, inactivo, "No". */
.badge.badge-neutral {
  background-color: var(--border);
  color: var(--muted);
}

/* ============================================================
   CALLOUTS — guia §10: borde 1px del color al 25%, fondo soft, 13px.
   Los 4 unicos. Todos los banners morados migran a co-info.
   (Los ~270 usos de alert-info ya migraron solos al redefinir --bs-info
   en 02-puente-bs.css: en Metronic v8 ese token era MORADO.)
   ============================================================ */
.co {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  border: 1px solid transparent;
}
.co-info    { background-color: var(--info-soft);    border-color: #0284c740; color: var(--fg); }
.co-success { background-color: var(--accent-soft);  border-color: #2ed47a40; color: var(--fg); }
.co-warning { background-color: var(--warning-soft); border-color: #f59e0b40; color: var(--fg); }
.co-danger  { background-color: var(--danger-soft);  border-color: #dc262640; color: var(--fg); }

/* ============================================================
   TABLAS — guia §8. Cabecera sobre --surface, 11px/700/uppercase/--muted,
   sin bordes verticales. Filas: separador 1px --border, padding 12px 14px.
   Se ataca por CSS sobre .table: hay 127 <table> a mano en 88 .razor con 47
   combinaciones de clase distintas; reescribirlas no es viable.
   ============================================================ */
/* OJO CON LA ESPECIFICIDAD (medido, no supuesto): Metronic aplica
     .table:not(.table-bordered) tr,
     .table:not(.table-bordered) th,
     .table:not(.table-bordered) td { text-transform: inherit; font-size: inherit; color: inherit; }
   Eso es (0,2,1) — DOS clases (.table + el :not) y un elemento — y gana a un
   ".table > thead > tr > th" (0,1,3), porque las clases pesan mas que los
   elementos. Por eso hay que replicar el :not(.table-bordered): asi subimos a
   (0,2,3) y ganamos SIN !important. */
.table:not(.table-bordered) > thead > tr > th {
  background-color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
}
.table:not(.table-bordered) > tbody > tr > td {
  font-size: 13px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

/* ============================================================
   FORMULARIOS — guia §9. Focus outline 2px --primary.
   ============================================================ */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  box-shadow: none;
}
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--danger);
  outline-color: var(--danger);
}

/* ============================================================
   AVATAR DE USUARIO — guia §7 (barra superior).
   El isotipo de marca (default-vozenter-small.svg) se usaba como
   foto de usuario en el navbar: confundia marca con identidad de
   quien ha iniciado sesion. Cuando el usuario no tiene Imagen se
   pinta este placeholder neutro con sus iniciales.
   ============================================================ */
/* Cualificado con `.symbol .symbol-label` a proposito: Metronic pinta ese
   selector (0,2,0) con su gris #f9f9f9 y peso 500. Un `.avatar-iniciales`
   pelado (0,1,0) PIERDE y el avatar salia gris en vez de --primary-soft. */
.symbol .symbol-label.avatar-iniciales {
  display: flex;
  align-items: center;
  justify-content: center;
  /* El tamano lo pone Metronic con `.symbol-35px .symbol-label`. No se toca:
     un width/height:100% aqui se resuelve contra `.symbol`, que no tiene tamano
     propio, y el circulo colapsaba al ancho del texto (18x13 en vez de 35x35). */
  background-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}

/* ============================================================
   MIGAS DE PAN — guia §7.
   "Ultimo nivel = H1 de la pagina, en --primary 600". Los niveles
   de paso siguen en muted; solo el actual toma el color de marca.
   ============================================================ */
.breadcrumb .breadcrumb-item.breadcrumb-actual,
.breadcrumb .breadcrumb-item .breadcrumb-actual {
  color: var(--primary);
  font-weight: 600;
}

/* ============================================================
   BANCO DE PRUEBAS DEL LOGO ANIMADO — solo /estilos (pestana
   "Animacion"). Ver docs/manual/identidad/animacion/README.md.

   POR QUE VIVE AQUI Y NO EN UN Estilos.razor.css SCOPED:
   el bundle scoped de Blazor (VZT_Panel_V0.Web.styles.css) NO
   se enlaza en App.razor — comprobado: cero referencias en todo
   el proyecto. O sea que los .razor.css de este repo NO SE
   SIRVEN (hay 2, y son codigo muerto). Un scoped aqui no
   pintaria nada. Todo va prefijado .vzt-anim-* para que no
   alcance a ninguna de las otras 150 paginas que cargan esta capa.
   ============================================================ */
.vzt-anim-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.vzt-anim-cell {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  min-width: 236px;
}

/* Cabecera de la celda: mismo lenguaje que .card-header (superficie + regla). */
.vzt-anim-cap {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 11px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fg);
}

.vzt-anim-cap em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}

/* La celda de REFERENCIA (el video de GLO) se marca con el primario: es
   contra lo que se compara todo lo demas, no una opcion mas de la fila. */
.vzt-anim-cell.is-ref .vzt-anim-cap {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Los dos fondos de marca sobre los que tiene que funcionar el logo. */
.vzt-anim-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.vzt-anim-stage.is-dark  { background: var(--sidebar-bg); }
.vzt-anim-stage.is-light { background: var(--bg); }

/* Tamano real del page loader. */
.vzt-anim-loader img,
.vzt-anim-loader video {
  display: block;
  width: 200px;
  height: auto;
}

/* Tamano real del sidebar. */
.vzt-anim-side {
  padding: 12px 20px;
}

.vzt-anim-side img,
.vzt-anim-side video {
  display: block;
  width: auto;
  height: 40px;
}

.vzt-anim-iso { padding: 14px 20px; }
.vzt-anim-iso + .vzt-anim-iso { border-top: 1px solid var(--border); }

/* Tira de escala: la altura la fija la clase, no un style inline.
   CUALIFICADAS `.vzt-anim-escala img.vzt-anim-hNN` (0,2,1) A PROPOSITO, y NO
   `.vzt-anim-hNN` a secas (0,1,0): la tira vive dentro de un .vzt-anim-side,
   cuyo `.vzt-anim-side img` (0,1,1) ya fija height:40px y GANA a la clase
   pelada. MEDIDO: con las clases sin cualificar, los cuatro tamanos salian los
   cuatro a 40px — la tira que existe para enseñar la escala no enseñaba
   ninguna escala, y ningun test lo notaba (el SVG carga, anima y no da 404).
   Se vio mirando la captura y se confirmo midiendo el alto real en el DOM. */
.vzt-anim-escala { gap: 16px; }
.vzt-anim-escala img { width: auto; display: block; }
.vzt-anim-escala img.vzt-anim-h24 { height: 24px; }
.vzt-anim-escala img.vzt-anim-h40 { height: 40px; }
.vzt-anim-escala img.vzt-anim-h64 { height: 64px; }
.vzt-anim-escala img.vzt-anim-h96 { height: 96px; }