/* =========================================================
   ESTILO GENERAL
========================================================= */

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #dadada;
    color: #3a2e2b;
    margin: 0;
    padding: 0;
}

/* =========================================================
   HEADER
========================================================= */

.header {
    text-align: center;
    padding: 8px 20px;
    background-color: #58585a;
    color: #fff;
}

.header h1 {
    font-weight: 600;
    font-size: 2.4em;
    margin: 10px 0;
}

.logo {
    height: 45px;
    margin: 10px auto 20px;
    display: block;
}

/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

main {
    max-width: 1200px;
    margin: 25px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* =========================================================
   DASHBOARD
========================================================= */

.dashboard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* =========================================================
   BLOQUES / CARDS
========================================================= */

.card {
    background: #ffffff;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    flex: 1;
  /*border: 1px solid #4c838f;*/
    
}

.contenedor {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.conborde {
    flex: 1;
    background: #ffffff;
    border: 2px solid #4c838f;
    border-radius: 18px;
    padding: 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
}

.titulo-bloque {
    background-color: #4c838f;
    color: #fff;
    padding: 10px;
    margin: -15px -15px 15px -15px;
    border-radius: 15px 15px 0 0;
    font-weight: 600;
    text-align: center;
}

.titulo-bloque-registro {
    background-color: #4c838f;
    color: #fff;
    padding: 10px;
    margin: -15px -15px 15px -15px;
    border-radius: 15px 15px 0 0;
    font-weight: 600;
    text-align: left;
}

/* =========================================================
   FAQ / AYUDA – ACORDEÓN
========================================================= */

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.faq-item {
    background-color: #F0F4F6;
    /*border-radius: 25px;*/
    padding: 20px;
    border-bottom: 1px solid #4c838f;
}

.faq-item summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    text-transform: uppercase;
    color: #4c838f;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-respuesta {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
    /*border: 1px solid #4c838f;*/
    margin-top: 15px;
    text-align: justify;
}

details summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
}

details summary::-webkit-details-marker {
    display: none; /* quita el triangulito por defecto */
}

.faq-icon {
    font-size: 20px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

/* Cuando está abierta */
details[open] .faq-icon {
    content: "−";
}

/* Responsive: una columna en móvil */
@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   ÚLTIMO REGISTRO
========================================================= */

/*.card-ultimo-registro {
    display: flex;
    justify-content: center;
    
}*/

.ultimo-registro {
    border: 2px solid #4c838f;
    color: #4c838f;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 600;
    background: #f0f6f8;
}

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

.formulario {
    background: linear-gradient(180deg, #f5f7f8, #ffffff);
    border-radius: 18px;
}

.campo {
    margin-bottom: 25px;
    width: 95%;
}

.campo label {
    font-weight: 600;
    font-size: 0.9em;
    color: #3a2e2b;
    opacity: 0.85;
}

input[type="text"],
input[type="date"],
select,
textarea {
    width: 95%;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #ccc;
    font-family: inherit;
    margin-top: 6px;
    }

textarea {
    resize: none;
}

.fila-filtros {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.fila-opciones {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.fila-filtros .campo {
    width: auto;         
    flex: 0 0 auto;    
    margin-bottom: 0;   
}

.fila-formulario {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
}

.campo-boton {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}

.campo-boton .btn-nuevo {
    width: 100%;
    height: 48px;
    font-size: 16px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
    align-items: start;
    margin-bottom: 25px;
}

/* Columna tipo */
.campo-tipo {
    display: flex;
    flex-direction: column;
}

.radio-contenedor {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

/* Observaciones */
.campo-observaciones textarea {
    width: 90%;
    resize: vertical;
    font-size: 15px;
}

/* Botón abajo centrado */
.form-boton {
    margin-top: 10px;
}

.form-boton .btn-nuevo {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 14px;
}



/* =====================================
   RADIO BOTÓN – ENTRADA / SALIDA
===================================== */

.radio-contenedor {
    margin-top: 15px;
}

.radio-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    /*border: 3px solid transparent;*/
    transition: all 0.25s ease;
    user-select: none;
    margin-top: -10px;
}

.radio-boton input {
    display: none;
}

/* SALIDA */
.radio-boton.salida {
    /*background-color: #fbeaea;*/
    color: #d12c2c;
    /*border-color: #d12c2c;*/
}

/* ENTRADA */
.radio-boton.entrada {
    /*background-color: #e9f4ec;*/
    color: #2d7a1f;
    /*border-color: #2d7a1f;*/
}

/* Estado seleccionado (sin ocultar texto) */
.radio-boton input:checked + span {
    color: inherit;
}


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

button,
input[type="submit"] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.btn-registrar {
    background-color: #2d7a1f;
    color: #fff;
    padding: 25px;
    border-radius: 22px;
    width: 100%;
    font-size: 1.05em;
}

.btn-registrar:hover {
    background-color: #236017;
}

.btn-nuevo {
    background-color: #2d7a1f;
    color: #fff;
    padding: 12px 24px;
    border-radius: 20px;
}

.btn-nuevo:hover {
    background-color: #236017;
}

.btn-menu {
    background-color: #4c838f;
    color: #fff;
    padding: 12px 24px;
    border-radius: 20px;
}

.btn-menu:hover {
    background-color: #2b5b65;
}

.btn-menuadm {
    background-color: #db9e34;
    color: #fff;
    padding: 12px 24px;
    border-radius: 20px;
}

.btn-menuadm:hover {
    background-color: #ba8428;
}

.btn-salir {
    background-color: #d12c2c;
    color: #fff;
    padding: 12px 24px;
    border-radius: 20px;
}

.btn-salir:hover {
    background-color: #aa2323;
}

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

.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.tabla-datos th {
    background-color: #f0f4f6;
    color: #4c838f;
    border-bottom: 1px solid #4c838f;
    padding: 12px;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
}

.tabla-datos td {
    border-bottom: 1px solid #d0dde0;
    padding: 10px;
}

.tabla-datos tr:hover {
    background-color: #f7fbfc;
}

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

.btn-editarentrada {
    background-color: #559348;
    color: #fff;
    padding: 6px 10px;
    border-radius: 14px;
    font-size: 0.8em;
}

.btn-editarsalida {
    background-color: #ff8e8e;
    color: #fff;
    padding: 6px 10px;
    border-radius: 14px;
    font-size: 0.8em;
}

.btn-solicitar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;   
  padding: 10px;
  background-color: #c9c21a;
  color: #fff;
  border-radius: 20px;
  font-weight: 600;
 }
 
 .btn-aprobar {
    background-color: #2d7a1f;
    color: #fff;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 0.8em;
    text-align: center;
}

 .btn-rechazar {
    background-color: #d12c2c;
    color: #fff;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 0.8em;
    text-align: center;
}

/* =========================================================
   MENSAJES
========================================================= */

.mensaje-error {
    color: red;
    font-weight: 600;
}

.resumen {
    margin-top: 20px;
}

.card-resumen {
    background: #f7fbfc;
    border-left: 6px solid #4c838f;
    padding: 20px;
}

.fecha {
    display: block;
    font-size: 30px;
    text-align: center;
    color: #4c838f;
}


.reloj {
    display: block;
    font-size: 60px;
    text-align: center;
    color: #4c838f;
}

.tipo-entrada {
    color: #559348;
    font-weight: bold;
}

.tipo-salida {
    color:#ff8e8e;
    font-weight: bold;
}


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

.login-container {
    max-width: 600px;
    margin: 60px auto;
    background-color: #fff;
    padding: 40px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    text-align: center;
}

.login-form input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}


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

@media (max-width: 768px) {

    main {
        margin: 20px;
        padding: 20px;
    }

    .contenedor {
        flex-direction: column;
    }

    .btn-registrar {
        font-size: 1em;
    }
}

/* GRID PARA RADIO + OBSERVACIONES */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* RADIO */
.radio-contenedor {
    justify-content: flex-start; /* alinea a la izquierda en desktop */
}

/* BOTÓN REGISTRAR: ocupa todo el ancho */
.form-boton .btn-nuevo {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-bottom: -15px;
}

/* MEDIA QUERY: móvil */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr; /* apila radio y observaciones */
        gap: 15px;
    }

    /* Llevar "Registrar" al inicio del contenido en móvil */
    .dashboard-bottom .contenedor {
        display: flex;
        flex-direction: column-reverse; /* invierte columnas */
        gap: 15px;
    }

    .btn-nuevo {
        font-size: 15px;
        padding: 12px;
    }
}