/* ===== Ajustes de interfaz compartidos (panel admin/movimientos y páginas públicas) =====
   Se enlaza AL FINAL del <head> de admin/dashboard.php, movimientos/dashboard.php, inventario.php,
   rines.php e index.php, después de style.css / panel-theme.css / los <style> en línea, para tener
   la última palabra. Por eso se usa :not(#ui) (sube la especificidad sin tocar el CSS de otros) y,
   donde hay estilos en línea (style="...") o clases de Tailwind generadas por JS, !important.
   Colores: azul = color primario del tema (--c-primary del panel, #0058bc en páginas públicas);
   rojo = acciones destructivas. Ambos con variante para html.dark. */
:root {
    --ui-azul: var(--c-primary, #0058bc);
    --ui-rojo: #c62828; /* auditoría: #dc2626 daba 4.3:1 (texto rojo sobre el tinte); #c62828 da 5:1 (AA) */
    --ui-rojo-fondo: rgba(198, 40, 40, .08);
}
html.dark {
    --ui-rojo: #f87171;
    --ui-rojo-fondo: rgba(248, 113, 113, .14);
}

/* ===== 1. Menú lateral flotante: el texto siempre se lee completo ===== */
/* Abierto (mouse encima o foco de teclado): más ancho, y el texto puede ocupar 2+ líneas en
   vez de recortarse (antes: 220px y max-width 180px con nowrap -> "Historial de llantas" salía cortado). */
body .gp-rail:not(#ui):hover,
body .gp-rail:not(#ui):has(:focus-visible) {
    width: min(300px, calc(100vw - 48px)) !important;
    align-items: stretch;
}
body .gp-rail:not(#ui):hover .side-link,
body .gp-rail:not(#ui):has(:focus-visible) .side-link { justify-content: flex-start; gap: 14px; }
body .gp-rail:not(#ui):hover .gp-rail-label,
body .gp-rail:not(#ui):has(:focus-visible) .gp-rail-label {
    opacity: 1;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    white-space: normal !important; /* anula whitespace-nowrap de Tailwind en el bloque de marca */
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: left;
}
body .gp-rail:not(#ui) .side-link { height: auto; min-height: 48px; }
body .gp-rail:not(#ui) .side-link .material-symbols-outlined { flex: none; }
@media (max-width: 1024px) {
    body .gp-rail:not(#ui):hover,
    body .gp-rail:not(#ui):has(:focus-visible) { width: min(280px, calc(100vw - 24px)) !important; }
}

/* ===== 3a. Casillas, radios e interruptores: contorno azul visible ===== */
input[type="checkbox"]:not(#ui),
input[type="radio"]:not(#ui) {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 1.1rem; height: 1.1rem; /* los estilos específicos (16px, inline) siguen mandando */
    flex: none;
    margin: 0;
    padding: 0 !important;
    vertical-align: middle;
    cursor: pointer;
    border: 2px solid var(--ui-azul) !important;
    border-radius: 4px;
    background-color: var(--c-surface-container-lowest, #fff);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transition: background-color .15s ease, box-shadow .15s ease;
}
input[type="radio"]:not(#ui) { border-radius: 50%; }
input[type="checkbox"]:not(#ui):checked {
    background-color: var(--ui-azul);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type="radio"]:not(#ui):checked {
    background-color: var(--c-surface-container-lowest, #fff);
    background-image: radial-gradient(circle, var(--ui-azul) 0 42%, transparent 48%);
}
input[type="checkbox"]:not(#ui):disabled,
input[type="radio"]:not(#ui):disabled { opacity: .5; cursor: not-allowed; }
input[type="checkbox"]:not(#ui):focus-visible,
input[type="radio"]:not(#ui):focus-visible,
select:not(#ui):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-azul) 35%, transparent) !important;
}

/* ===== 3b. Desplegables y campos de elegir (select, fecha, hora): contorno azul ===== */
select:not(#ui),
input[type="date"]:not(#ui), input[type="month"]:not(#ui), input[type="time"]:not(#ui), input[type="datetime-local"]:not(#ui) {
    border: 1.5px solid var(--ui-azul) !important;
}
select:not(#ui):hover,
input[type="date"]:not(#ui):hover, input[type="month"]:not(#ui):hover, input[type="time"]:not(#ui):hover, input[type="datetime-local"]:not(#ui):hover {
    border-color: var(--ui-azul) !important;
    background-color: color-mix(in srgb, var(--ui-azul) 5%, var(--c-surface-container-lowest, transparent));
}
select:not(#ui):focus,
input[type="date"]:not(#ui):focus, input[type="month"]:not(#ui):focus, input[type="time"]:not(#ui):focus, input[type="datetime-local"]:not(#ui):focus {
    outline: none;
    border-color: var(--ui-azul) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-azul) 30%, transparent) !important;
}

/* ===== 3c. Botones secundarios (.btn-outline): contorno y texto azules ===== */
.btn-outline:not(.site-header .btn-outline, #ui) {
    border: 1px solid var(--ui-azul) !important;
    color: var(--ui-azul) !important;
}
.btn-outline:not(.site-header .btn-outline, #ui):hover:not(:disabled) {
    background: color-mix(in srgb, var(--ui-azul) 10%, transparent) !important;
    border-color: var(--ui-azul) !important;
    color: var(--ui-azul) !important;
}
.btn-outline:not(.site-header .btn-outline, #ui):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-azul) 35%, transparent);
}

/* ===== 3d. Botones destructivos (eliminar / borrar / cancelar baja, vale, ticket...): contorno y texto rojos =====
   Lista real de lo que genera el JS: .btn-danger; [data-borrar-alta|borrar-mov] (movimientos.js);
   [data-cancelar|cancelar-aprobada] (bajas.js); [data-cancelar-vale|cancelar-mov] (movimientos.js);
   onclick="deleteTire|deleteRin|cancelarVale|cancelarTicket|movimientosEnEdicion.delete" (admin.js);
   botones Tailwind bg-error/10 o border-error/30 (admin.js); .btn-outline con color:var(--danger) en línea ("Quitar").
   Se excluye la "x" redonda de quitar foto de rin (eliminarRinFoto), que ya es un círculo rojo sólido. */
:is(.btn-danger, [data-borrar-alta], [data-borrar-mov], [data-cancelar], [data-cancelar-aprobada], [data-cancelar-mov], [data-cancelar-vale],
    [data-eliminar], [data-borrar],
    button[onclick*="deleteTire"], button[onclick*="deleteRin"], button[onclick*="cancelarVale"], button[onclick*="cancelarTicket"],
    button[onclick*="movimientosEnEdicion.delete"], button[onclick*="\"eliminar\""],
    button[class*="bg-error/"], button[class*="border-error/"],
    .btn-outline[style*="--danger"]):not(#ui, [onclick*="eliminarRinFoto"]) {
    border: 1px solid var(--ui-rojo) !important;
    color: var(--ui-rojo) !important;
    background: var(--ui-rojo-fondo) !important;
}
:is(.btn-danger, [data-borrar-alta], [data-borrar-mov], [data-cancelar], [data-cancelar-aprobada], [data-cancelar-mov], [data-cancelar-vale],
    [data-eliminar], [data-borrar],
    button[onclick*="deleteTire"], button[onclick*="deleteRin"], button[onclick*="cancelarVale"], button[onclick*="cancelarTicket"],
    button[onclick*="movimientosEnEdicion.delete"], button[onclick*="\"eliminar\""],
    button[class*="bg-error/"], button[class*="border-error/"],
    .btn-outline[style*="--danger"]):not(#ui, [onclick*="eliminarRinFoto"]):hover:not(:disabled) {
    background: var(--ui-rojo) !important;
    border-color: var(--ui-rojo) !important;
    color: #fff !important;
}
:is(.btn-danger, [data-borrar-alta], [data-borrar-mov], [data-cancelar], [data-cancelar-aprobada], [data-cancelar-mov], [data-cancelar-vale]):not(#ui):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-rojo) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    input[type="checkbox"], input[type="radio"], select, .btn-outline, .btn-danger,
    .gp-rail, .gp-rail-label { transition: none !important; }
}

/* ===== 4. Configuración (admin y movimientos; también la app de escritorio) =====
   Antes: el botón activo de "Tamaño de letra" quedaba azul con letra azul (la regla .btn-outline de
   arriba pisaba el texto blanco) y se veía vacío. Ahora son opciones propias con muestra "Aa",
   secciones con tarjeta, colores con paloma y vista previa en vivo. */
#settingsModalOverlay .modal { max-width: 520px; }
#settingsModalOverlay .modal-body { display: flex; flex-direction: column; gap: 12px; }
#settingsModalOverlay .settings-sec {
    padding: 14px 16px; border-radius: 14px;
    border: 1px solid var(--c-outline-subtle, #d1d1d6);
    background: var(--c-surface-container-low, rgba(0, 0, 0, .02));
}
#settingsModalOverlay .settings-sec-title {
    display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em;
    color: var(--c-on-surface, inherit); margin: 0 0 10px;
}
#settingsModalOverlay .settings-hint { font-size: 12px; color: var(--muted, #6b7280); margin: -4px 0 10px; }

/* Tamaño de letra: 3 opciones con su propia muestra; la activa = relleno azul + texto blanco */
#settingsModalOverlay .settings-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#settingsModalOverlay .settings-seg-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 64px; padding: 8px 6px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid var(--ui-azul); background: transparent; color: var(--ui-azul);
    font: inherit; font-size: 12.5px; font-weight: 600;
    transition: background-color .15s ease, color .15s ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
#settingsModalOverlay .settings-seg-btn .settings-seg-aa { font-weight: 700; line-height: 1.1; }
#settingsModalOverlay .settings-seg-btn:hover { background: color-mix(in srgb, var(--ui-azul) 10%, transparent); }
#settingsModalOverlay .settings-seg-btn:active { transform: scale(.97); }
#settingsModalOverlay .settings-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-azul) 35%, transparent); }
#settingsModalOverlay .settings-seg-btn.active,
#settingsModalOverlay .settings-seg-btn[aria-pressed="true"] { background: var(--ui-azul); color: #fff; }
#settingsModalOverlay .settings-preview {
    margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45;
    background: var(--c-surface-container-lowest, #fff); border: 1px dashed var(--c-outline-subtle, #d1d1d6);
    color: var(--c-on-surface, inherit);
}

/* Colores: bolitas con contorno; la elegida lleva paloma y anillo azul */
#settingsModalOverlay .settings-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
#settingsModalOverlay .settings-swatch {
    position: relative; width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid var(--c-surface-container-lowest, #fff);
    box-shadow: 0 0 0 1px var(--c-outline-subtle, #c4c7cf);
    transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow .15s ease;
}
#settingsModalOverlay .settings-swatch:hover { transform: scale(1.08); }
#settingsModalOverlay .settings-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-azul) 45%, transparent); }
#settingsModalOverlay .settings-swatch.selected { box-shadow: 0 0 0 2px var(--ui-azul); }
#settingsModalOverlay .settings-swatch.selected::after {
    content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* "Predeterminado": ya no es un círculo blanco ambiguo, dice "Auto" */
#settingsModalOverlay .settings-swatch.settings-swatch-default {
    width: auto; min-width: 52px; padding: 0 12px; border-radius: 999px; font: inherit; font-size: 12px; font-weight: 700;
    background: var(--c-surface-container-lowest, #fff); color: var(--c-on-surface, #181c23);
}
#settingsModalOverlay .settings-swatch.settings-swatch-default.selected::after { content: none; }
#settingsModalOverlay .settings-swatch.settings-swatch-default.selected { color: var(--ui-azul); }

/* Foto de perfil: vista previa grande + selector de archivo con botón propio */
#settingsModalOverlay .settings-photo { display: flex; align-items: center; gap: 16px; }
#settingsModalOverlay .settings-photo-preview {
    width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--c-outline-subtle, #d1d1d6);
}
#settingsModalOverlay .settings-photo-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
#settingsModalOverlay #settingsAvatarPhotoInput {
    width: 100%; max-width: 100%; font-size: 12.5px; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important;
}
#settingsModalOverlay #settingsAvatarPhotoInput::file-selector-button {
    margin-right: 10px; padding: 8px 14px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 600;
    border: 1.5px solid var(--ui-azul); background: color-mix(in srgb, var(--ui-azul) 8%, transparent); color: var(--ui-azul);
}
#settingsModalOverlay #settingsAvatarPhotoInput::file-selector-button:hover { background: color-mix(in srgb, var(--ui-azul) 16%, transparent); }
@media (max-width: 420px) {
    #settingsModalOverlay .settings-photo { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    #settingsModalOverlay .settings-seg-btn, #settingsModalOverlay .settings-swatch { transition: none !important; }
}

/* ===== Contraste (auditoría): texto blanco sobre el azul CLARO del modo oscuro (#3b82f6 = 3.7:1) y sobre
   el verde de "Enviar WhatsApp" (#16a34a = 3.3:1). Se oscurece SOLO el fondo de los botones rellenos
   (azul rey #2563eb = 5.2:1, verde #15803d = 5.0:1); el azul claro se queda para texto/enlaces/bordes,
   donde sí contrasta bien contra el fondo oscuro. */
html.dark .bg-primary:not(#ui) { background-color: #2563eb; }
html.dark .hover\:bg-primary\/90:hover:not(#ui), html.dark .hover\:bg-primary:hover:not(#ui) { background-color: #1d4ed8; }
html.dark .btn-primary:not(#ui) {
    background: linear-gradient(135deg, #2563eb, color-mix(in srgb, #2563eb 60%, #7c3aed)) !important;
}
:root { --success-solid: #15803d; }
.btn-success:not(#ui) { color: var(--success-solid); }                     /* texto sobre el tinte verde claro: 4.9:1 */
.btn-success:hover:not(#ui) { background: var(--success-solid); color: #fff; } /* blanco sobre verde: 5.0:1 */
html.dark .btn-success:not(#ui) { color: var(--success); }                 /* en oscuro el verde claro ya contrasta sobre su tinte */
html.dark .btn-success:hover:not(#ui) { background: #15803d; color: #fff; }