/* =========================================================
   VARIABLES GLOBALES Y PALETA DE COLORES (MODO CLARO, IGUAL A LA APP DE VOLUNTARIOS)
   ========================================================= */
:root {
    --bg-dark: #F0F1F4;      /* fondo de página (antes era el fondo oscuro) */
    --bg-panel: #FFFFFF;     /* paneles y tarjetas elevadas (antes panel oscuro) */
    --border-color: #E4E6EA; /* líneas divisorias sutiles */

    --navy: #0A1931;         /* franjas superiores / chrome de marca, igual que la app */
    --navy-2: #10233F;

    --c-red: #D32F2F;
    --c-orange: #F57C00;
    --c-blue: #0A58CA;
    --c-green: #1E8E3E;
    --c-yellow: #B7791F;
    --c-cyan: #0288D1;
    --c-purple: #8E24AA;
    --c-gray: #7f8c8d;

    --text-light: #16181D;   /* texto principal (antes blanco, ahora oscuro) */
    --text-muted: #6B6F76;   /* texto secundario */
    --text-on-navy: #FFFFFF;
    --text-on-navy-dim: rgba(255, 255, 255, 0.65);

    --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-oficial: Arial, Helvetica, sans-serif;

    /* Para el redimensionamiento de paneles en Central */
    --left-w: 280px;
    --right-w: 320px;
}

/* =========================================================
   ESTILOS BASE
   ========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-dark); color: var(--text-light); font-family: var(--font-main); }

/* =========================================================
   1. PORTAL DE INICIO (INDEX.HTML)
   ========================================================= */
.index-body { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; }
.index-header { text-align: center; margin-bottom: 40px; }
.index-header h1 { font-size: 2rem; color: var(--text-light); margin-bottom: 10px; }
.index-header p { color: var(--text-muted); font-size: 1.1rem; }
.index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; width: 100%; max-width: 1000px; }
.index-card { background-color: var(--bg-panel); border: 2px solid var(--border-color); border-radius: 8px; padding: 25px; text-decoration: none; color: var(--text-light); transition: transform 0.2s, box-shadow 0.2s; }
.index-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(16,24,40,0.12); }
.index-card h2 { font-size: 1.3rem; margin-bottom: 10px; }
.index-card p { color: var(--text-muted); font-size: 0.95rem; }
.card-cad { border-color: var(--border-color); }
.card-gyras { border-color: var(--border-color); }
.card-maq { border-color: var(--c-green); }
.card-mdt { border-color: var(--c-yellow); }

/* =========================================================
   2. CENTRAL DE ALARMAS 1 (CENTRAL.HTML)
   ========================================================= */
.central-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.topbar { background-color: var(--navy); border-bottom: 1px solid var(--navy-2); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
.topbar h1 { font-size: 1.2rem; color: var(--text-on-navy); }
#clock { font-size: 1.2rem; font-weight: bold; color: var(--text-on-navy); }
/* min-height: 0 es la parte importante: sin esto, un hijo flex dentro de un
   contenedor flex en columna (.central-body) se niega a encogerse más allá
   de su contenido. Cuando el contenido no cabe en pantallas más bajas
   (típico en notebooks Windows), en vez de activar el scroll interno de
   cada .panel, .triptych simplemente crece y .central-body lo recorta con
   overflow:hidden — de ahí el "achatado" y la rueda del mouse sin efecto. */
.triptych { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.panel { background-color: var(--bg-dark); overflow-y: auto; padding: 15px; min-height: 0; }
/* Espacio al final de cada columna para que el menú flotante (esquina inferior derecha) no tape el último botón. */
.triptych .panel { padding-bottom: 70px; }
.panel-left { width: var(--left-w); min-width: 220px; }
.panel-center { flex: 1; min-width: 300px; position: relative; }
.panel-right { width: var(--right-w); min-width: 250px; background-color: var(--bg-panel); border-left: 1px solid var(--border-color); }
.resizer { width: 5px; background-color: var(--border-color); cursor: col-resize; }
.claves-list { display: flex; flex-direction: column; gap: 8px; }
.clave-btn { --clave-color: var(--c-gray); background-color: var(--bg-panel); border: 1px solid var(--clave-color); color: var(--clave-color); padding: 10px; text-align: left; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background-color 0.2s, color 0.2s; }
.clave-btn:hover { background-color: var(--bg-dark); }
.clave-btn.selected { background-color: var(--clave-color); border-color: var(--clave-color); color: #fff; }
.dispatch-form-layout { display: flex; flex-direction: column; height: 100%; gap: 15px; }
.mini-map { flex: 1; min-height: 200px; border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; }
#map { width: 100%; height: 100%; }
.gps-btn-group { display: flex; gap: 10px; }
.btn-gps-wa, .btn-gps-sms { flex: 1; padding: 10px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; color: white; }
.btn-gps-wa { background-color: var(--bg-panel); color: var(--navy); border: 1.5px solid var(--navy); }
.btn-gps-sms { background-color: var(--navy); }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; background-color: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 4px; font-family: var(--font-main); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--navy); }
.chk-atentado-container { display: flex; align-items: center; gap: 10px; color: var(--c-red); font-weight: bold; margin-top: 10px; font-size: 0.9rem; }
.form-footer-stick { margin-top: auto; }
.btn-dispatch { width: 100%; background-color: var(--c-red); color: white; padding: 15px; border: none; border-radius: 6px; font-size: 1.1rem; font-weight: bold; cursor: pointer; text-transform: uppercase; }
.btn-dispatch:hover { background-color: #c0392b; }
.units-section h2, .maquinistas-section h2 { font-size: 1rem; margin-bottom: 10px; color: var(--text-muted); }
.units-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.unit-btn { background-color: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-light); padding: 12px 5px; border-radius: 4px; font-weight: bold; cursor: pointer; text-align: center; }
.unit-btn.selected { background-color: var(--navy); border-color: var(--navy); color: white; }
/* Fuera de servicio (doc operaciones/flota): celda roja, no se puede seleccionar. */
.unit-btn.unit-fuera-servicio { background-color: var(--c-red); border-color: var(--c-red); color: white; opacity: 0.85; }
/* Ocupada: ya está despachada en otra emergencia activa ahora mismo. Gris, distinto
   del rojo de fuera de servicio, para no confundir un motivo con el otro de un vistazo. */
.unit-btn.unit-ocupada { background-color: var(--c-gray); border-color: var(--c-gray); color: white; opacity: 0.85; }
.maq-select { width: 100%; padding: 10px; background-color: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-light); border-radius: 4px; }
.emergency-card { background-color: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 6px; padding: 15px; margin-bottom: 10px; border-left: 4px solid var(--c-red); }
.emergency-card.alarma-1, .emergency-card.alarma-2, .emergency-card.alarma-3 { border-left-color: var(--border-color); }
.emergency-card h3 { margin-bottom: 5px; font-size: 1.1rem; }
.emergency-card p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 3px; }
.btn-destructive { background-color: transparent; border: 1px solid var(--c-red); color: var(--c-red); width: 100%; cursor: pointer; font-weight: bold; border-radius: 4px; }
.btn-destructive:hover { background-color: var(--c-red); color: white; }
.address-suggestions-list { position: absolute; width: 100%; background: var(--bg-panel); z-index: 9999; list-style: none; padding: 0; margin: 0; border: 1px solid var(--border-color); max-height: 200px; overflow-y: auto; }

/* =========================================================
   3. CENTRAL DE ALARMAS 2 (CENTRAL2.HTML)
   ========================================================= */
/* Central 2: la página no se desplaza (central-body tiene overflow: hidden), así que la
   grilla es la que se desplaza; sin flex/min-height/overflow la rueda no hacía nada
   y las tarjetas que no cabían quedaban cortadas. */
.c2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 20px; padding: 20px 20px 80px; flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.c2-card { background-color: var(--bg-panel); border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(16,24,40,0.08); }
.c2-unit-row { background-color: var(--bg-dark); padding: 10px; border-radius: 6px; border: 1px solid var(--border-color); }
.c2-times-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.btn-c2-time { background-color: var(--bg-panel); border: 1px solid var(--border-color); color: var(--text-muted); padding: 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.btn-c2-time span { font-size: 1rem; color: var(--text-light); margin-top: 3px; }
.btn-c2-time.marcado { background-color: var(--navy); border-color: var(--navy); color: white; }
.btn-c2-time.marcado span { color: #fff; }

/* =========================================================
   4. APP MAQUINISTAS Y CONDUCTORES
   ========================================================= */
.maquinista-body { background-color: var(--bg-dark); display: flex; flex-direction: column; height: 100vh; }
.app-header { background-color: var(--navy); padding: 15px; text-align: center; border-bottom: 1px solid var(--navy-2); color: var(--text-on-navy); }
.app-header h1 { font-size: 1.2rem; }
.content-area { flex: 1; overflow-y: auto; padding: 20px; }
.tab-section { display: none; }
.tab-section.active { display: block; }
.selector-container { margin-bottom: 30px; }
.selector-container label { display: block; color: var(--text-muted); margin-bottom: 10px; font-weight: bold; }
.selector-container select { width: 100%; padding: 15px; background: var(--bg-panel); color: white; border: 1px solid var(--border-color); border-radius: 6px; font-size: 1.1rem; }
.status-container { display: flex; flex-direction: column; gap: 15px; }
.btn-maq-status { padding: 20px; border: none; border-radius: 8px; font-size: 1.2rem; font-weight: bold; color: white; cursor: pointer; }
.btn-disponible { background-color: var(--c-green); }
.btn-fuera { background-color: var(--border-color); color: var(--text-muted); }
.current-status-banner { margin-top: 30px; text-align: center; font-size: 1.2rem; font-weight: bold; padding: 20px; background: var(--bg-panel); border-radius: 8px; }
.bottom-nav { display: flex; background-color: var(--bg-panel); border-top: 1px solid var(--border-color); }
.nav-item { flex: 1; padding: 15px; text-align: center; color: var(--text-muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.nav-item.active { color: var(--navy); border-top: 3px solid var(--navy); }
.empty-state-maq { text-align: center; padding: 40px 20px; color: var(--text-muted); font-style: italic; }
.alert-card { background: var(--c-red); border-radius: 12px; overflow: hidden; color: white; }
.alert-head { padding: 15px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
.alert-body { background: var(--bg-panel); padding: 15px; border-top: 1px solid rgba(255,255,255,0.1); }
.alert-inst { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 15px; }
.action-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.btn-asiste, .btn-no-asiste { flex: 1; padding: 10px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.btn-asiste { background: var(--c-green); color: white; }
.btn-no-asiste { background: var(--border-color); color: var(--text-muted); }
.time-block { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-light); }
.time-clock { font-size: 1.2rem; font-weight: bold; }
.alert-details { font-size: 0.9rem; }
.alert-obs { color: var(--c-orange); margin-bottom: 5px; font-weight: bold; }

/* =========================================================
   5. COMPARTIR UBICACIÓN (LOC.HTML)
   ========================================================= */
.loc-body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: var(--bg-dark); color: var(--text-light); }
.loc-box { background: var(--bg-panel); padding: 30px; border-radius: 10px; border: 1px solid var(--border-color); width: 100%; max-width: 350px; }
.loc-box h2 { color: var(--c-red); margin-top: 0; font-size: 1.5rem; text-transform: uppercase; }
.btn-loc { background: var(--navy); color: white; width: 100%; padding: 15px; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: bold; margin-top: 20px; cursor: pointer; }

/* =========================================================
   6. SISTEMA GYRAS (EL HISTORIAL Y LAS TABLAS)
   ========================================================= */
body.gyras-body { background-color: var(--bg-dark); color: var(--text-light); padding: 20px; min-height: 100vh; display: flex; flex-direction: column; }
.gyras-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--border-color); padding-bottom: 15px; margin-bottom: 25px; }
.gyras-header h1 { font-size: 1.8rem; font-weight: 900; letter-spacing: 1px; color: var(--text-light); }
.gyras-header h1 span { color: var(--navy); }
.gyras-station-tag { background: var(--navy); padding: 6px 12px; border-radius: 4px; font-size: 0.85rem; font-weight: bold; border: none; color: var(--c-yellow); }
.btn-limpiar-historial { background: transparent; border: 1px solid var(--c-red); color: var(--c-red); padding: 8px 14px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; cursor: pointer; text-transform: uppercase; white-space: nowrap; }
.btn-limpiar-historial:hover { background: var(--c-red); color: #fff; }
.btn-limpiar-historial:disabled { opacity: 0.6; cursor: not-allowed; }

.gyras-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }
.gyras-stat-card { background: var(--bg-panel); border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; text-align: center; }
.gyras-stat-card h3 { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px; }
.gyras-stat-card .num { font-size: 2rem; font-weight: 900; color: var(--text-light); }
.gyras-stat-card.total .num { color: var(--c-yellow); }

.gyras-filter-bar { background: var(--bg-panel); border: 1px solid var(--border-color); padding: 15px; border-radius: 6px; margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap; align-items: center; }
.gyras-filter-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 150px; }
.gyras-filter-group label { font-size: 0.75rem; font-weight: bold; color: var(--text-muted); text-transform: uppercase; }
.gyras-filter-group input, .gyras-filter-group select { width: 100%; padding: 10px; background: var(--bg-dark); color: var(--text-light); border: 1px solid var(--border-color); border-radius: 4px; outline: none; }

.gyras-table-container { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 6px; overflow-x: auto; flex: 1; margin-bottom: 60px; }
.gyras-table-container table { width: 100%; border-collapse: collapse; text-align: left; }
.gyras-table-container th { background: var(--navy); padding: 12px 15px; font-size: 0.8rem; text-transform: uppercase; color: var(--text-on-navy-dim); font-weight: bold; border-bottom: 2px solid var(--navy-2); }
.gyras-table-container td { padding: 14px 15px; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; vertical-align: middle; }
.gyras-empty-state { padding: 40px; text-align: center; color: var(--text-muted); font-weight: bold; font-style: italic; }

.badge-code { background: var(--bg-dark); padding: 4px 8px; border-radius: 4px; font-weight: bold; border: 1px solid var(--border-color); font-size: 0.85rem; display: inline-block; }
.badge-code.estructural { border-color: var(--c-red); color: var(--c-red); }
.badge-code.pastizal { border-color: var(--c-green); color: var(--c-green); }
.badge-code.rescate { border-color: var(--c-orange); color: var(--c-orange); }
.badge-unit { background: rgba(255, 235, 59, 0.1); color: var(--c-yellow); border: 1px solid var(--c-yellow); padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; margin-right: 4px; display: inline-block; }
.badge-alarma { background: var(--c-red); color: #fff; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 900; animation: pulse-red 2s infinite; }
.btn-view { background: var(--navy); border: none; color: #fff; padding: 8px 12px; border-radius: 4px; font-weight: bold; cursor: pointer; font-size: 0.8rem; text-transform: uppercase; }

/* EL MODAL DE IMPRESIÓN DEL GYRAS */
.gyras-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 15px; }
.gyras-modal-content-doc { background: #E5E5EA; width: 100%; max-width: 950px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.7); display: flex; flex-direction: column; max-height: 90vh; }
.gyras-doc-header-dark { background: var(--navy); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--navy-2); }
.btn-print { background: var(--navy); color: white; border: none; padding: 8px 15px; border-radius: 4px; font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 0.85rem; }
.gyras-modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; }
.gyras-modal-body { padding: 20px; overflow-x: auto; max-height: 70vh; }

/* =========================================================
   7. NUEVO SISTEMA GYRAS: PLANTILLA SUPERPUESTA (OVERLAY)
   ========================================================= */
.hoja-plantilla {
    position: relative;
    width: 800px;
    height: 1130px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto 30px auto;
    background-color: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    page-break-after: always;
}

.dato-overlay {
    position: absolute;
    background: rgba(245, 124, 0, 0.15); /* Fondo naranja visual */
    border: 1px dashed rgba(245, 124, 0, 0.6);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: black;
    padding: 2px 4px;
    outline: none;
    z-index: 10;
}

.dato-overlay:focus {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--navy);
}

.dato-overlay.font-bold { font-weight: bold; }
.dato-overlay.text-center { text-align: center; }

.chk-overlay {
    position: absolute;
    width: 16px;
    height: 16px;
    cursor: pointer;
    z-index: 10;
    accent-color: black;
}

/* REGLAS DE IMPRESIÓN EXACTA PARA EL PDF Y PAPEL */
@media print {
    @page { size: auto; margin: 0; }

    /* 1. Forzar la impresión de colores e imágenes de fondo en Chrome/Safari */
    body {
        background: white !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 2. Ocultar absolutamente TODO el sitio web que está por debajo */
    body > *:not(#detail-modal) {
        display: none !important;
    }

    /* 3. Liberar la ventana emergente para que no corte la página 2 */
    .gyras-modal {
        position: absolute !important;
        inset: 0 !important;
        background: none !important;
        display: block !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .gyras-modal-content-doc {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .gyras-modal-body {
        padding: 0 !important;
        background: none !important;
        overflow: visible !important;
    }

    /* 4. Forzar el salto de página después de cada hoja y obligar a imprimir la imagen */
    .hoja-plantilla {
        box-shadow: none !important;
        margin: 0 !important;
        border: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        page-break-after: always !important;
    }

    /* 5. Ocultar menú superior y fondos naranjas de ayuda */
    .gyras-doc-header-dark { display: none !important; }
    .dato-overlay { background: transparent !important; border: none !important; }
}

/* =========================================================
   8. MODO CALIBRACIÓN GYRAS (?calibrar=1 / abrirCalibrador())
   ========================================================= */
body.modo-calibracion .gyras-header,
body.modo-calibracion .gyras-stats-grid,
body.modo-calibracion .gyras-filter-bar,
body.modo-calibracion .gyras-table-container,
body.modo-calibracion > div[style*="position: fixed"] {
    display: none !important;
}

body.modo-calibracion .gyras-modal {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    background: #2b2f36 !important;
    padding: 0 !important;
    z-index: 5000;
}
body.modo-calibracion .gyras-doc-header-dark { display: none !important; }
body.modo-calibracion .gyras-modal-content-doc {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body.modo-calibracion .gyras-modal-body {
    height: 100%;
    max-height: none !important;
    overflow: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 90px 20px 150px 20px !important;
    background: #2b2f36 !important;
}

body.modo-calibracion .dato-overlay,
body.modo-calibracion .chk-overlay {
    cursor: grab;
    touch-action: none;
}
body.modo-calibracion .campo-arrastrando {
    cursor: grabbing !important;
}
.campo-activo {
    outline: 3px solid var(--navy) !important;
    outline-offset: 1px;
    z-index: 999 !important;
}

.chk-cal-label {
    position: absolute;
    background: rgba(10, 88, 202, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 11;
    transform: translateY(-100%);
}

/* Barra flotante superior del calibrador */
.cal-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    z-index: 5100;
    gap: 12px;
    flex-wrap: wrap;
}
.cal-topbar .cal-title { font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-on-navy); }
.cal-topbar .cal-campo-activo { font-size: 0.8rem; color: var(--text-on-navy-dim); }
.cal-btn {
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.8rem;
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
}
.cal-btn.secundario { background: transparent; border: 1px solid rgba(255,255,255,0.4); }
.cal-btn.salir { background: var(--c-red); }

/* D-pad flotante (uso táctil / iPad) */
.cal-dpad {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(10, 25, 49, 0.92);
    border-radius: 12px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 46px);
    grid-template-rows: repeat(3, 46px);
    gap: 4px;
    z-index: 5100;
}
.cal-dpad button {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-light);
    cursor: pointer;
}
.cal-dpad button:active { background: var(--navy); color: #fff; }
.cal-dpad .cal-paso {
    grid-column: 2; grid-row: 2;
    font-size: 0.55rem !important;
    background: var(--navy) !important;
    color: #fff !important;
}

/* Modal de exportación de coordenadas */
.cal-export-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    display: none; align-items: center; justify-content: center;
    z-index: 6000; padding: 20px;
}
.cal-export-modal.abierto { display: flex; }
.cal-export-box {
    background: var(--bg-panel); border-radius: 8px; padding: 20px;
    width: 100%; max-width: 700px; max-height: 80vh; display: flex; flex-direction: column; gap: 12px;
    color: var(--text-light);
}
.cal-export-box textarea {
    width: 100%; flex: 1; min-height: 300px; font-family: monospace; font-size: 0.8rem;
    padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; resize: vertical;
    color: var(--text-light); background: var(--bg-dark);
}