/* ============================================================
   amun-componentes.css — Componentes compartidos de Amun (Fase 4)
   Se importa desde shared-app.css, justo después de amun-tokens.css, así que
   carga ANTES que admin.css / personal.css: lo que cada módulo necesite
   distinto se sobrescribe en su propio CSS (misma especificidad, gana el último).
   Regla: acá solo van estilos que eran idénticos en más de un módulo.
   Colores: usar variables de amun-tokens.css, no valores sueltos.

   Contenido (se va completando por tandas):
     1) Ventanas (modal)  — .modal-overlay / -box / -header / -body / -footer,
                            .modal-section-title, .modal-form-row, .modal-form-group,
                            .btn-modal-cancel / .btn-modal-confirm
     2) Avisos (toast)    — .toast (+ .show, .success, .error)
     3) Botones de ícono  — .btn-icon-edit / .btn-icon-del (28 px)
     4) Etiquetas de estado — .estado-tag (forma común) + .ok/.warn/.crit/.info/.neutral
     5) Indicadores (KPI) — barra .stats-bar (Taller/IVA) = .ph-stats (Personal): base común
     6) Estado vacío, detalle, botón de salida — .empty-state, .detail-item, .btn-logout (siempre ícono de 32 px, con tooltip)
     7) Manual — panel de ayuda con buscador (.manual-*), idéntico en Taller y Personal
     8) Buscador de barra — .toolbar-search::placeholder (el resto de .toolbar-search difiere: foco rojo/violeta)
     9) Tablas — .tabla-simple (Personal) = .historial-table (Taller/IVA): métrica de Personal (decidido en el boceto, opción B2)
    10) Paneles — .panel (caja base: fondo, borde, radio, sombra), .p-pad (con relleno), .p-head (cabecera con línea) y .p-tit (su título).
                  Un panel nuevo es <div class="panel"> (+ <div class="p-head"> si lleva título); lo propio de cada módulo
                  (márgenes, estados, hover) queda en su CSS, nunca el fondo, el borde ni el radio.
   Formas: --radius-card (12 px) y --radius-tag (3 px) viven en amun-tokens.css; las usa .panel (y con él todas las tarjetas) y los badges/.chip.
   Pendiente: formularios.

   Diferencias que se quedan en cada módulo (a propósito, para no cambiar el aspecto):
     · ancho de .modal-box: Taller 560 px (acá), Personal 680 px (personal.css)
     · color del placeholder en .modal-form-group: solo Taller (admin.css)
     · .modal-section-title con margen superior, .modal-form-row.cols-3, checkbox y
       select[size] dentro de .modal-form-group: solo Personal (personal.css)
     · columnas, márgenes, hover/clic y color del activo de la barra de indicadores
       (.stats-bar/.stat-item en admin.css; .ph-stats/.ph-stat-clickable en personal.css)
     · colores de estado propios de cada módulo (.estado-tag.pendiente/.confirmado/… en Taller,
       .activo/.inactivo/… en Personal): siguen en admin.css / personal.css
     · botones de ícono propios de Personal (.btn-icon-print/-save/-cancel/-round/-mini/-header)
     · @keyframes fadeIn: lo define cada página (Taller con desplazamiento, Personal solo opacidad)
   ============================================================ */

/* ── 1) VENTANAS ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:500; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay.show { display:flex; }
.modal-box { background:var(--bg-modal); border:1px solid var(--border); border-top:3px solid var(--red); border-radius:6px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; animation:fadeIn 0.2s ease; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.5rem; border-bottom:1px solid var(--border); }
.modal-header h3 { font-family:'Oswald',sans-serif; font-size:1rem; letter-spacing:0.08em; text-transform:uppercase; }
.modal-header h3 span { color:var(--red); }
.modal-close { background:none; border:none; color:rgba(var(--fg-rgb),0.4); font-size:1.4rem; cursor:pointer; line-height:1; padding:0; transition:color 0.2s; }
.modal-close:hover { color:var(--white); }
.modal-body { padding:1.5rem; }
.modal-section-title { font-size:0.68rem; letter-spacing:0.15em; color:rgba(var(--fg-rgb),0.4); text-transform:uppercase; font-family:'Oswald',sans-serif; margin-bottom:0.8rem; }
.modal-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.modal-form-group { margin-bottom:1rem; }
.modal-form-group label { display:block; font-size:0.7rem; letter-spacing:0.1em; color:rgba(var(--fg-rgb),0.45); text-transform:uppercase; font-family:'Oswald',sans-serif; margin-bottom:0.4rem; }
.modal-form-group label .opt { color:rgba(var(--fg-rgb),0.25); font-size:0.65rem; letter-spacing:0; text-transform:none; font-family:'Source Sans 3',sans-serif; font-weight:300; margin-left:4px; }
.modal-form-group input, .modal-form-group select, .modal-form-group textarea {
  width:100%; background:rgba(var(--fg-rgb),0.05); border:1px solid rgba(var(--fg-rgb),0.1); border-radius:3px;
  color:var(--white); padding:0.6rem 0.8rem; font-family:'Source Sans 3',sans-serif; font-size:0.9rem;
  outline:none; transition:border-color 0.2s; -webkit-appearance:none;
}
.modal-form-group input:focus, .modal-form-group select:focus, .modal-form-group textarea:focus { border-color:var(--red); }
.modal-form-group select option { background:var(--bg-modal); }
.modal-form-group input[type="date"] { color-scheme:var(--native-color-scheme); }
.modal-form-group textarea { resize:vertical; min-height:70px; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; }
.btn-modal-cancel { background:transparent; border:1px solid rgba(var(--fg-rgb),0.15); color:rgba(var(--fg-rgb),0.5); padding:0.6rem 1.2rem; border-radius:3px; font-family:'Oswald',sans-serif; font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; transition:all 0.2s; }
.btn-modal-cancel:hover { border-color:rgba(var(--fg-rgb),0.3); color:var(--white); }
.btn-modal-confirm { background:var(--red); border:none; color:#fff; padding:0.6rem 1.4rem; border-radius:3px; font-family:'Oswald',sans-serif; font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:background 0.2s; }
.btn-modal-confirm:hover { background:var(--red-dark); }
.btn-modal-confirm.chico { padding:0.4rem 0.9rem; font-size:0.78rem; letter-spacing:0.06em; }

/* ── 2) AVISOS ── */
.toast { position:fixed; bottom:2rem; right:2rem; background:var(--bg-toast); border:1px solid var(--border); border-radius:4px; padding:0.8rem 1.2rem; font-size:0.88rem; z-index:998; transform:translateY(100px); opacity:0; transition:all 0.3s; max-width:320px; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { border-color:var(--green); color:var(--green); }
.toast.error { border-color:var(--red-light); color:var(--red-light); }

/* ── 3) BOTONES DE ÍCONO ── */
.btn-icon-edit, .btn-icon-del {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; cursor: pointer; transition: all 0.2s;
  font-size: 0.85rem; line-height: 1; flex-shrink: 0;
}
.btn-icon-edit { background: color-mix(in srgb, var(--blue) 8%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue); }
.btn-icon-edit:hover { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.btn-icon-del  { background: color-mix(in srgb, var(--red) 8%, transparent);  border: 1px solid color-mix(in srgb, var(--red) 25%, transparent);  color: var(--red-light); }
.btn-icon-del:hover  { background: color-mix(in srgb, var(--red) 18%, transparent); }

/* ── 4) ETIQUETAS DE ESTADO ──
   Forma común. Los colores por estado los define cada módulo con sus nombres (ver arriba).
   Para código nuevo: .estado-tag + .ok / .warn / .crit / .info / .neutral (variables semánticas de amun-tokens.css). */
.estado-tag { display:inline-block; padding:2px 8px; border-radius:2px; font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.estado-tag.ok      { background:var(--ok-wash);   color:var(--ok); }
.estado-tag.warn    { background:var(--warn-wash); color:var(--warn); }
.estado-tag.crit    { background:var(--crit-wash); color:var(--crit); }
.estado-tag.info    { background:var(--info-wash); color:var(--info); }
.estado-tag.neutral { background:rgba(var(--fg-rgb),0.08); color:rgba(var(--fg-rgb),0.55); }

/* ── 5) INDICADORES (KPI) ──
   Taller, Compras, Ventas, IVA, Fondos y Transporte usan .stats-bar/.stat-item; Personal, el mismo diseño con prefijo .ph-.
   Un solo aspecto en todo Amun (el de Personal): cada indicador es una tarjeta separada, con borde propio y el radio común.
   El que está filtrando se marca con el borde de acento (.active, ver admin.css y personal.css). */
.stats-bar, .ph-stats { display:grid; gap:10px; margin:0 0 1.2rem; }
.stat-item, .ph-stat { background:var(--surface); padding:0.9rem 1rem; border:1px solid var(--border); border-radius:var(--radius-card); }
.stat-num, .ph-stat-num { font-family:'Oswald',sans-serif; font-size:1.6rem; line-height:1; }
.stat-lbl, .ph-stat-lbl { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(var(--fg-rgb),0.35); margin-top:2px; }

/* ── 6) ESTADO VACÍO, DETALLE, BOTÓN DE SALIDA ── */
.btn-logout { background:transparent; border:1px solid color-mix(in srgb, var(--red-light) 40%, transparent); color:rgba(var(--fg-rgb),0.5); padding:0; width:32px; height:32px; font-size:0; white-space:nowrap; border-radius:8px; cursor:pointer; transition:all 0.2s; display:inline-flex; align-items:center; justify-content:center; flex:none; }
/* Ícono «Salir»: puerta con flecha, el mismo de shell-menu.js (PIE.salir) y de los íconos de línea del Portal.
   Va como máscara para tomar el color del texto (currentColor) y seguir el tema, igual que el resto de los íconos. */
.btn-logout::before { content:''; display:inline-block; width:17px; height:17px; background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-logout:hover { border-color:var(--red); color:var(--red-light); }
.empty-state { text-align:center; padding:4rem 2rem; color:rgba(var(--fg-rgb),0.25); }
.detail-item .di-label { font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(var(--fg-rgb),0.35); font-family:'Oswald',sans-serif; }
.detail-item .di-val { font-size:0.9rem; margin-top:1px; color:var(--white); }

/* ── 7) MANUAL ── */
.manual-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.manual-intro { font-size:0.83rem; color:rgba(var(--fg-rgb),0.5); margin:0.35rem 0 0; max-width:56ch; }
.manual-search { position:relative; display:flex; align-items:center; margin:0 0 0.6rem; }
.manual-search-icon { position:absolute; left:0.8rem; font-size:0.85rem; opacity:0.55; pointer-events:none; }
#manual-buscador { width:100%; box-sizing:border-box; height:2.6rem; padding:0 2.4rem 0 2.3rem; font-size:0.9rem; background:rgba(var(--fg-rgb),0.05); border:1px solid var(--border); border-radius:4px; color:var(--white); outline:none; -webkit-appearance:none; appearance:none; }
#manual-buscador::-webkit-search-cancel-button { -webkit-appearance:none; display:none; }
#manual-buscador-clear { position:absolute; right:0.4rem; width:1.9rem; height:1.9rem; border:none; border-radius:50%; background:rgba(var(--fg-rgb),0.08); color:rgba(var(--fg-rgb),0.7); font-size:1.15rem; line-height:1; cursor:pointer; }
#manual-buscador-clear:hover { background:rgba(var(--fg-rgb),0.16); color:var(--white); }
.manual-resultados { font-size:0.78rem; color:rgba(var(--fg-rgb),0.5); margin:0 0 0.8rem; }
.manual-toc { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.4rem; }
.manual-toc a { font-size:0.72rem; padding:0.35rem 0.75rem; border:1px solid var(--border); border-radius:20px; color:rgba(var(--fg-rgb),0.65); text-decoration:none; white-space:nowrap; }
.manual-toc a.manual-toc-off { opacity:0.3; pointer-events:none; }
.manual-sec { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:1.1rem 1.2rem; margin-bottom:1rem; scroll-margin-top:1rem; }
.manual-sec h3 { font-family:'Oswald',sans-serif; font-size:0.95rem; letter-spacing:0.04em; margin:0 0 0.7rem; color:var(--white); }
.manual-sec p { font-size:0.85rem; color:rgba(var(--fg-rgb),0.6); line-height:1.55; margin:0 0 0.6rem; }
.manual-sec code { background:rgba(var(--fg-rgb),0.08); padding:0.1rem 0.35rem; border-radius:3px; font-size:0.82em; }
.manual-sec li { margin-bottom:0.35rem; }
.manual-var-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.5rem; font-size:0.78rem; color:rgba(var(--fg-rgb),0.55); }
.manual-var-grid div { background:rgba(var(--fg-rgb),0.04); border:1px solid var(--border); border-radius:3px; padding:0.5rem 0.6rem; }
.manual-var-grid b { color:rgba(var(--fg-rgb),0.85); }

/* ── 8) Buscador de barra: solo el placeholder era idéntico (el borde de foco y el tamaño difieren por módulo) ── */
.toolbar-search::placeholder { color:rgba(var(--fg-rgb),0.25); }

/* ── 9) Tablas: una sola métrica (la de Personal). Cada módulo suma lo suyo: margen y campos (.tabla-simple), color de celda (.historial-table) ── */
.tabla-simple, .historial-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.tabla-simple th, .historial-table th, .recibo-tabla th { text-align:left; font-family:'Oswald',sans-serif; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(var(--fg-rgb),0.4); padding:0.5rem 0.6rem; border-bottom:1px solid var(--border); }
.tabla-simple td, .historial-table td, .recibo-tabla td { padding:0.5rem 0.6rem; border-bottom:1px solid rgba(var(--fg-rgb),0.06); vertical-align:middle; }
.tabla-simple tr:last-child td, .historial-table tr:last-child td { border-bottom:none; }

/* Tanda 6 — Fila de íconos del encabezado (Taller/IVA: .admin-header-icons; Personal: .ph-header-icons). Base idéntica;
   cada módulo conserva su posicionamiento y su gap móvil en sus @media (cargan después de este archivo). */
.admin-header-icons, .ph-header-icons { display:flex; align-items:center; gap:8px; }

/* ── Íconos de línea (iconos.svg + js/iconos.js): reemplazan a los emojis. Miden lo mismo que el texto que los rodea
   y toman su color. .aico-rojo / .aico-ambar: puntos de estado (antes 🔴 / 🟡). ── */
.aico { width:1.05em; height:1.05em; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-0.17em; pointer-events:none; }
.aico-rojo { color:var(--red); }
.aico-ambar { color:#e0a100; }

/* Botón «Inicio» (volver al Portal) del encabezado, igual en Taller, Personal e IVA: ícono de 32 px, como Tema / Manual / Salir.
   Es un enlace a /portal, no usa .btn-logout (es otra acción). En celular es la única salida al Portal. */
.btn-portal { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid rgba(var(--fg-rgb), 0.15); color: rgba(var(--fg-rgb), 0.6); border-radius: 8px; text-decoration: none; transition: all 0.2s; }
.btn-portal:hover { border-color: var(--red); color: var(--red-light); }

/* ── 10) PANELES ──
   Una sola caja para todo el sistema (antes cada módulo tenía la suya: .iva-card, .fo-card, .conv-card, .pnl-card, .turno-card…, con radios de 3, 4 y 12 px).
   .p-pad  suma el relleno estándar (1,2 rem) para paneles sin cabecera propia ni tablas a sangre.
   .p-head cabecera: título a la izquierda, acciones a la derecha y una línea debajo; dentro de un .p-pad se estira hasta los bordes. */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); box-shadow:var(--shadow); min-width:0; }
.panel.p-pad { padding:1.2rem; }
.p-head { display:flex; align-items:center; justify-content:space-between; gap:0.8rem; padding:0.85rem 1rem; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.panel.p-pad > .p-head { margin:-1.2rem -1.2rem 1rem; }
.p-head h2, .p-tit { margin:0; font:500 0.95rem var(--f-display); letter-spacing:0.1em; text-transform:uppercase; }
.p-head .sub { color:var(--ink-3); font-size:0.82rem; }