/* =====================================================
   Archivo: /krankenhaus/assets/css/styles.css
   KH-ARBEITSZEIT - UI Hacker + Modo Impresión Pro
   ===================================================== */

:root {
    --bg-dark: #030812;
    --glass: rgba(8, 20, 40, 0.85);
    --cyan: #00e5ff;
    --yellow: #fffd1c;
    --line: #00ade1;
    --danger: #ff3366;
    --green-neon: #32ff7e;
    --text-main: #e6f7ff;
}

/* ===========================
   BASE & BACKGROUND
   =========================== */

body.bg-nexus {
    min-height: 100vh;
    background: radial-gradient(circle at top, #061426 0, #030812 40%, #000000 100%);
    color: var(--text-main);
    font-family: 'Rajdhani', sans-serif;
    margin: 0;
    overflow-x: hidden; /* Evita scroll lateral global */
}

.container {
    max-width: 1200px;
}

/* Cards generales */
.card {
    background-color: rgba(3, 8, 18, 0.95);
    border-radius: 1rem;
    border: 1px solid rgba(0, 229, 255, 0.15);
}

/* Card tipo vidrio */
.card-glass {
    background: var(--glass);
    border-radius: 1.2rem;
    border: 1px solid rgba(0, 173, 225, 0.4);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
}

/* ===========================
   LOGIN
   =========================== */

.login-card {
    background: #061426;
    border-radius: 1.5rem;
    border: 1px solid rgba(0, 229, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(15px);
    padding: 2rem;
}

.fingerprint-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.4);
    transition: all 0.3s ease;
}

.fingerprint-circle:hover {
    box-shadow: 0 0 40px var(--cyan);
    transform: scale(1.05);
}

/* ===========================
   TIPOGRAFÍAS / TEXTOS
   =========================== */

.app-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 10px var(--cyan);
}

.app-title-sm {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.35rem;
    text-transform: uppercase;
}

.text-neon {
    color: var(--cyan);
}

.text-neon-muted {
    color: rgba(180, 220, 255, 0.7);
}

.border-neon {
    border-bottom: 1px solid rgba(0, 173, 225, 0.6) !important;
}

.link-neon {
    color: var(--yellow);
    text-decoration: none;
}

.link-neon:hover {
    text-decoration: underline;
    text-shadow: 0 0 8px var(--yellow);
}

/* ===========================
   INPUTS / FORMULARIOS
   =========================== */

.input-hacker,
.form-control.bg-transparent,
.form-control {
    background: rgba(3, 8, 18, 0.9);
    border: 1px solid rgba(0, 173, 225, 0.4);
    color: var(--text-main);
    border-radius: 0.8rem;
    padding: 0.55rem 0.75rem;
}

.input-hacker:focus,
.form-control:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
    background: rgba(3, 8, 18, 0.95);
    color: #fff;
}

/* PLACEHOLDERS en blanco opaco */
.form-control::placeholder,
.input-hacker::placeholder,
.form-select::placeholder {
    color: rgba(230, 247, 255, 0.6);
}

/* Selects */
.form-select {
    background: rgba(3, 8, 18, 0.9);
    border: 1px solid rgba(0, 173, 225, 0.4);
    color: var(--text-main);
    border-radius: 0.8rem;
}

.form-select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
    background: rgba(3, 8, 18, 0.95);
}

/* Labels */
.form-label {
    font-size: 0.85rem;
    color: rgba(200, 230, 255, 0.9);
}

/* ===========================
   BOTONES
   =========================== */

.btn-neon,
.btn-primary,
.btn-success,
.btn-outline-light,
.btn-outline-secondary {
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
}

/* Principal Neon */
.btn-neon,
.btn-primary {
    border: 1px solid var(--cyan);
    background: linear-gradient(135deg, #061426, #03111f);
    color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.btn-neon:hover,
.btn-primary:hover {
    background: var(--cyan);
    color: #030812;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.55);
}

/* Outline claro */
.btn-outline-light {
    border-color: rgba(250, 250, 255, 0.6);
    color: #f8fafc;
    background: transparent;
}

.btn-outline-light:hover {
    background: #f8fafc;
    color: #030812;
}

/* Outline secundario */
.btn-outline-secondary {
    border-color: rgba(148, 163, 184, 0.8);
    color: #cbd5f5;
    background: transparent;
}

.btn-outline-secondary:hover {
    background: rgba(148, 163, 184, 0.2);
}

/* Botón admin aprobar */
.btn-neon-approve {
    border-radius: 999px;
    border: 1px solid var(--green-neon);
    background: transparent;
    color: var(--green-neon);
    padding: 0.1rem 0.6rem;
    cursor: pointer;
}

.btn-neon-approve:hover {
    background: var(--green-neon);
    color: #030812;
}

/* Enlaces login/registro */
.btn-link.text-info {
    font-size: 0.85rem;
    text-decoration: none;
}

.btn-link.text-info:hover {
    text-decoration: underline;
}

/* ===========================
   BETTEN (Camas)
   =========================== */

.btn-betten {
    font-family: 'Share Tech Mono', monospace;
    background: var(--glass);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 10px var(--line);
    font-size: 1.8rem;
    cursor: pointer;
}

.btn-betten:hover,
.btn-betten-active {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px var(--cyan);
    background: var(--cyan);
    color: var(--bg-dark);
}

.betten-counter {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2rem;
    color: var(--yellow);
    text-shadow: 0 0 10px var(--yellow);
}

/* ===========================
   CABECERA APP / BADGE / TITULOS
   =========================== */

.badge.bg-info {
    background: var(--cyan) !important;
    color: #030812 !important;
}

/* Títulos de cards en amarillo base (Verwaltung, Registro diario, Historial, Resumen mensual, etc.) */
.card-header {
    color: var(--yellow);
}

/* ===========================
   TABLAS / DATATABLES
   =========================== */

.table {
    color: var(--text-main);
    font-size: 0.8rem;
}

.table thead {
    background: rgba(15, 23, 42, 0.9);
}

.table thead th {
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

.table tbody tr {
    background: rgba(15, 23, 42, 0.7);
}

.table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.9);
}

/* DataTables: filtros/paginación */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: rgba(209, 213, 219, 0.9);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(55, 65, 81, 0.8);
    color: var(--text-main);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

/* Scroll horizontal decente para DataTables (no romper UI en móvil) */
.dataTables_wrapper .dataTables_scroll {
    overflow-x: auto !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
}

/* Rutas de fin de semana (SA / SO) en la vista normal */
tbody tr.row-weekend td:nth-child(7) { /* columna Bereich */
    color: #ff4b5c;
    font-weight: 600;
}

/* ===========================
   PANEL ADMIN USUARIOS
   =========================== */

#admin-panel .table td,
#admin-panel .table th {
    vertical-align: middle;
}

#admin-panel .form-control-sm,
#admin-panel .form-select-sm {
    background: rgba(3, 8, 18, 0.9);
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    color: var(--text-main);
    padding: 0.1rem 0.4rem;
}

/* ===========================
   RESUMEN MENSUAL (CARDS)
   =========================== */

#resumen-cards .card {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.5);
}

/* Etiqueta + valor en amarillo */
#resumen-cards .resumen-label {
    color: var(--yellow);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

#resumen-cards .resumen-value {
    font-family: 'Share Tech Mono', monospace;
    color: var(--yellow);
}

/* ===========================
   FOOTER
   =========================== */

footer {
    color: rgba(148, 163, 184, 0.9);
}

footer a {
    color: var(--yellow);
}

/* ===========================
   RESPONSIVE
   =========================== */

@media (max-width: 576px) {
    .login-card {
        padding: 1.5rem;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #resumen-cards .col-6 {
        margin-bottom: 0.5rem;
    }
}

/* =====================================================
   ENCABEZADO DEL REPORTE (PRINT)
   ===================================================== */

/* Oculto SIEMPRE en pantalla, solo se activa en @media print */
#print-header {
    display: none;
    font-size: 11pt;
    color: #000000;
    margin-bottom: 8px;
}

.report-summary-card {
    border: 1px solid #333;
    border-radius: 0.4rem;
    padding: 6px 8px;
    display: inline-block;
    margin-top: 4px;
}

.report-summary-title {
    font-weight: 600;
    font-size: 10pt;
    margin-bottom: 2px;
}

.report-summary-body {
    font-size: 9pt;
}

/* =====================================================
   MODO IMPRESIÓN A4 – SOLO REPORTE
   ===================================================== */

@media print {

    @page {
        size: A4 landscape;  /* Hoja horizontal */
        margin: 1cm;
    }

    body.bg-nexus {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mostrar encabezado especial del reporte SOLO al imprimir */
    #print-header {
        display: block !important;
    }

    /* Ocultar vistas que no son parte del reporte */
    #login-view,
    #register-view,
    #admin-panel,
    footer {
        display: none !important;
    }

    /* Ocultar header de la app (título + logout) */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        display: none !important;
    }

    /* Ocultar TODAS las cards salvo la del historial */
    .card:not(#historial-card) {
        display: none !important;
    }

    /* Dentro del historial: ocultar el título "Historial" */
    #historial-card .card-header {
        display: none !important;
    }

    /* Ajustar card del historial para que parezca hoja limpia */
    #historial-card,
    #historial-card .card-body {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        color: #000000 !important;
    }

    /* Ocultar controles de DataTables (Mostrar / Buscar / paginación / info) */
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dataTables_info,
    .dt-buttons {
        display: none !important;
    }

    /* TABLA – ancho completo, una línea por registro */
    #tabla-historial_wrapper {
        width: 100% !important;
    }

    #tabla-historial {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        font-size: 10pt;
        color: #000000;
        border-top: 1px solid #000000 !important; /* línea superior negra */
    }

    /* Eliminar columna Acciones (última) */
    #tabla-historial th:last-child,
    #tabla-historial td:last-child {
        display: none !important;
    }

    #tabla-historial th,
    #tabla-historial td {
        border: 1px solid #333333 !important;
        padding: 4px 6px !important;
        vertical-align: top !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important; /* UNA sola línea */
    }

    #tabla-historial thead th {
        background-color: #f1f5f9 !important;
        font-weight: 700 !important;
        text-transform: uppercase;
    }

    /* Anchos por columna (ID, Datum, Beginn, Ende, Pause, Überstd., Bereich, Desinf., Desinf.#, Betten, Notizen) */

    /* 1: ID */
    #tabla-historial th:nth-child(1),
    #tabla-historial td:nth-child(1) { width: 5%; }

    /* 2: Datum */
    #tabla-historial th:nth-child(2),
    #tabla-historial td:nth-child(2) { width: 10%; }

    /* 3: Beginn */
    #tabla-historial th:nth-child(3),
    #tabla-historial td:nth-child(3) { width: 8%; }

    /* 4: Ende */
    #tabla-historial th:nth-child(4),
    #tabla-historial td:nth-child(4) { width: 8%; }

    /* 5: Pause */
    #tabla-historial th:nth-child(5),
    #tabla-historial td:nth-child(5) { width: 6%; }

    /* 6: Überstd. */
    #tabla-historial th:nth-child(6),
    #tabla-historial td:nth-child(6) { width: 7%; }

    /* 7: Bereich (reducido) */
    #tabla-historial th:nth-child(7),
    #tabla-historial td:nth-child(7) { width: 10%; }

    /* 8: Desinfektion */
    #tabla-historial th:nth-child(8),
    #tabla-historial td:nth-child(8) { width: 16%; }

    /* 9: Desinf. # */
    #tabla-historial th:nth-child(9),
    #tabla-historial td:nth-child(9) { width: 6%; }

    /* 10: Betten */
    #tabla-historial th:nth-child(10),
    #tabla-historial td:nth-child(10) { width: 6%; }

    /* 11: Notizen (más ancho) */
    #tabla-historial th:nth-child(11),
    #tabla-historial td:nth-child(11) { width: 18%; }

    /* Rutas SA / SO en rojo EN EL REPORTE */
    #tabla-historial tbody tr.row-weekend td:nth-child(7) {
        color: #ff0000 !important;
        font-weight: 700 !important;
    }
}