/* ERP Gas · tema corporativo: azul oscuro, gris claro y naranja mate. Minimalista. */
:root {
    --navy-950: #0c1527;
    --navy-900: #14203a;
    --navy-800: #1d2a42;
    --navy-700: #2b3c59;
    --gray-50: #f8f9fb;
    --gray-100: #f1f3f6;
    --gray-200: #e3e7ed;
    --orange: #a95f33;
    --orange-soft: #f5e7db;
    --ink: #14203a;
    --ink-2: #4d5769;
    --ink-3: #6b7588;
    --ok: #2f7d55;
    --warn: #b7791f;
    --danger: #b4423a;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(20, 32, 58, .05), 0 1px 1px rgba(20, 32, 58, .03);
    color-scheme: light;
}

html { -webkit-font-smoothing: antialiased; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--gray-100) !important; color: var(--ink); letter-spacing: -.005em; }
h1, h2, h3 { letter-spacing: -.02em; color: var(--ink); }
.font-black { font-weight: 800 !important; }
::selection { background: var(--orange-soft); }

/* Tarjetas: borde fino y sombra mínima en lugar de sombras marcadas */
.shadow-sm, .shadow, .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--shadow) !important; }
main .rounded-lg, main .rounded-xl, main .rounded-2xl { border-radius: var(--radius); }
main section > .bg-white, main article.bg-white, main .rounded-2xl.bg-white, main .rounded-xl.bg-white { border-color: var(--gray-200); }

/* Formularios */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    border-color: var(--gray-200) !important; border-radius: 10px !important; background-color: #fff; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(180, 104, 58, .14) !important; }
input[type=checkbox], input[type=radio] { accent-color: var(--orange); }
label { color: var(--ink-2); }
button, a { transition: background-color .15s, color .15s, border-color .15s, opacity .15s; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* Tablas */
main table thead { background: var(--gray-50) !important; }
main table thead th { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
main table tbody tr { transition: background-color .12s; }
main table tbody tr:hover { background: #fbfcfd; }
main table td { color: var(--ink); }

/* Barra de pestañas del apartado */
.erp-tabs { box-shadow: none !important; border-color: var(--gray-200) !important; }

/* Mensajes emergentes (toasts) */
#erp-toasts { position: fixed; top: 16px; right: 16px; z-index: 80; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.erp-toast { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid var(--ok); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(12, 21, 39, .14); font-size: 14px; color: var(--ink); animation: erp-in .25s ease-out; }
.erp-toast.error { border-left-color: var(--danger); }
.erp-toast.warning { border-left-color: var(--warn); }
.erp-toast b { display: block; font-size: 13px; }
.erp-toast button { margin-left: auto; color: var(--ink-3); font-size: 18px; line-height: 1; }
@keyframes erp-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Ventana de confirmación */
.erp-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(12, 21, 39, .55); backdrop-filter: blur(2px); }
.erp-modal-box { width: min(440px, 100%); background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(12, 21, 39, .3); animation: erp-in .2s ease-out; }
.erp-modal-box h3 { font-size: 17px; font-weight: 700; }
.erp-modal-box p { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.erp-modal-box textarea { width: 100%; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--gray-200); min-height: 84px; }
.erp-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.erp-btn { border-radius: 10px; padding: 10px 16px; font-size: 14px; font-weight: 600; }
.erp-btn-ghost { background: var(--gray-100); color: var(--ink); }
.erp-btn-danger { background: var(--danger); color: #fff; }
.erp-btn-primary { background: var(--navy-900); color: #fff; }

/* Franja de emergencia */
.erp-emergency { background: #8f2f2a; color: #fff; }
.erp-emergency .dot { width: 10px; height: 10px; border-radius: 999px; background: #ffd2cc; box-shadow: 0 0 0 0 rgba(255, 210, 204, .7); animation: erp-pulse 1.6s infinite; }
@keyframes erp-pulse { 70% { box-shadow: 0 0 0 10px rgba(255, 210, 204, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 210, 204, 0); } }

/* Barra superior del área de trabajo */
.erp-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.erp-topbar .crumb { font-size: 13px; color: var(--ink-3); }
.erp-topbar .crumb b { color: var(--ink); font-weight: 600; }
.erp-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid var(--gray-200); color: var(--ink); }
.erp-chip:hover { border-color: var(--ink-3); }
.erp-chip.danger { background: #fbeeed; border-color: #f0cfcb; color: #8f2f2a; }

/* Impresión */
@media print { aside, header, .erp-topbar, .erp-tabs, #erp-toasts, .no-print { display: none !important; } body { background: #fff !important; } main { padding: 0 !important; } }

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* En celular la emergencia ya está en el menú superior */
@media (max-width: 1023px) { .erp-topbar .only-desktop { display: none; } }

/* Accesibilidad táctil: en celulares y tablets (dedo, no mouse) todo lo que se toca mide al menos 44 px. */
@media (pointer: coarse) {
    /* "html body" da más prioridad que la regla de 42 px de layouts/topbar.php */
    html body :is(button, [type="submit"], [type="button"], select, textarea, summary, .erp-chip, .erp-tabs a),
    html body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { min-height: 44px; }
    input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
}