/* --- Nature Job: Estilos principales móviles-first --- */

/* Paleta de colores inspirada en Google */
:root {
  --green: #59c7a6;
  --green-dark: #45a049;
  --blue: #2196F3;
  --blue-dark: #1976D2;
  --yellow: #fec76f;
  --yellow-dark: #FFA000;
  --red: #f98383;
  --red-dark: #b71c1c;
  --success: #32CD32;
  --success-dark: #228B22;
  --text-dark: #333;
  --text-medium: #555;
  --white: #fff;
  --light-bg: #f8f8f8;
  --border: #ddd;
  --header-bg: #e9edf6;
  --header-text: #3e4454;
  --footer-text: #000;
  /* Nuevos colores para el degradado de fondo */
  --gradient-start: #e0f7fa; /* Azul claro */
  --gradient-end: #e8f5e9; /* Verde muy claro */
}

/* --- Global --- */
body {
  font-family: 'Roboto', sans-serif;
  /* Aplicamos el fondo degradado aquí */
  background: linear-gradient(to bottom right, var(--gradient-start), var(--gradient-end));
  background-attachment: fixed; /* Fija el degradado para que no se mueva con el scroll */
  margin: 0;
  padding: 0;
  color: var(--text-dark);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--green);
  margin-top: 0;
  margin-bottom: 20px;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--blue-dark);
  text-decoration: underline;
}

/* --- Layout --- */
.main-content {
  flex-grow: 1;
  padding: 20px;
  box-sizing: border-box;
  max-width: 900px;
  margin: 20px auto;
  background: var(--white); /* Fondo blanco para el contenido principal */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo específico para el main-content en la página de login */
.main-content.login-page {
    background: none; /* Eliminar el fondo blanco y sombra en la página de login */
    box-shadow: none;
    margin: 0; /* Eliminar margen */
    padding: 20px; /* Restaurar padding */
    display: flex; /* Usar flexbox para centrar el contenido */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    /* Ajustamos la altura para ocupar todo el viewport ya que no hay footer */
    min-height: 100vh; /* Ocupar el 100% de la altura del viewport */
}

.main-content h1 { font-size: 1.5em}

/* --- Header --- */
.site-header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.site-title a {
  color: var(--header-text);
  font-size: 1.5em;
  font-weight: bold;
}
.site-title a:hover {
  opacity: 0.8;
}

/* Botón hamburguesa */
.menu-toggle {
  background: none;
  border: none;
  color: var(--green); /* Color verde para el icono hamburguesa */
  font-size: 2em;
  cursor: pointer;
  padding: 5px;
  display: block;
}

/* Navegación */
.site-nav {
  max-height: 0;
  overflow: hidden; /* Oculto por defecto */
  background: #d9e0ed;
  margin-top: 10px;
  border-radius: 4px;
  transition: max-height 0.3s ease; /* Transición para el slide-down */
  width: 100%; /* Ocupa todo el ancho en móvil */
}
.site-nav.active {
  max-height: 500px; /* Altura máxima cuando está activo (ajustar si es necesario) */
  overflow-y: auto; /* Habilitar scroll vertical si el contenido excede max-height */
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
}
.site-nav li {
  border-bottom: 1px solid rgba(62, 68, 84, 0.2);
}
.site-nav li:last-child {
  border-bottom: none;
}
.site-nav a {
  display: block;
  padding: 12px 20px;
  color: var(--header-text);
  font-size: 1.1em;
  /* Alineación de texto a la izquierda para que los iconos se vean bien */
  text-align: left;
}
.site-nav a:hover {
  opacity: 0.8;
}

/* Estilos para los iconos dentro del menú de navegación */
.site-nav a i {
    margin-right: 10px; /* Espacio entre el icono y el texto del menú */
    /* Puedes añadir más estilos aquí si quieres, como color o tamaño específico */
    color: var(--header-text); /* Color del icono igual al texto del menú */
}


/* --- Desktop header (actualizado para hamburguesa en escritorio) --- */
/* En pantallas grandes, el menú se comporta diferente */
@media (min-width: 769px) {
    .menu-toggle {
        display: none; /* Ocultar botón hamburguesa en escritorio */
    }

    .site-nav {
        max-height: none; /* Mostrar menú completo */
        overflow: visible; /* Deshabilitar scroll */
        background: none; /* Sin fondo en escritorio */
        margin-top: 0;
        transition: none;
        width: auto; /* Ancho automático en escritorio */
    }

    .site-nav ul {
        flex-direction: row; /* Mostrar enlaces en fila */
        align-items: center; /* Alinear verticalmente */
        padding: 0;
    }

    .site-nav li {
        border-bottom: none; /* Sin borde inferior */
        margin-left: 20px; /* Espacio entre enlaces */
    }
    .site-nav li:first-child {
        margin-left: 0; /* No hay margen a la izquierda para el primer elemento */
    }

    .site-nav a {
        padding: 5px 0; /* Padding ajustado para escritorio */
        text-align: center; /* Centrar texto en enlaces de escritorio si se desea */
    }
     /* Ajuste para iconos en enlaces de texto en escritorio (si los hubiera) */
     a i {
         margin-right: 5px;
     }
     /* Los iconos en el menú de escritorio también tendrán margen */
     .site-nav a i {
         margin-right: 5px; /* Espacio más pequeño en escritorio */
     }
}


/* --- Footer --- */
.site-footer {
  background: var(--white);
  color: var(--footer-text);
  padding: 20px;
  text-align: center;
  margin-top: 40px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.05);
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}
.site-footer p {
  margin: 0;
  font-size: 0.9em;
}

/* --- Formularios --- */
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: var(--text-medium);
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1em;
  box-sizing: border-box;
}

/* Ocultar flechas en número */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Botones --- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s ease;
  margin: 5px;
  /* Eliminamos el width fijo de 300px para que flexbox lo controle mejor */
  /* width: 300px; */
}
.btn-primary {
  background: var(--green);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--green-dark);
}
.btn-secondary {
  background: var(--blue);
  color: var(--white);
}
.btn-secondary:hover {
  background: var(--blue-dark);
}
.btn-danger {
  background: var(--red);
  color: var(--white);
}
.btn-danger:hover {
  background: var(--red-dark);
}
.btn-warning {
  background: var(--yellow);
  color: var(--text-dark);
}
.btn-warning:hover {
  background: var(--yellow-dark);
}
.btn-success {
  background: var(--success);
  color: var(--white);
}
.btn-success:hover {
  background: var(--success-dark);
}
.btn-full-width {
  width: 100%;
  display: block;
  margin: 10px 0;
}

/* Estilos para el icono dentro de los botones/enlaces */
.btn i {
    margin-right: 8px; /* Espacio entre el icono y el texto del botón */
}
/* Ya definimos a i arriba, pero podemos ser más específicos si es necesario */
/* a i {
    margin-right: 5px;
} */


/* --- Admin Actions --- */
.admin-actions {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centrar horizontalmente los items flex */
  margin-top: 20px;
  gap: 15px; /* Espacio entre botones */

  /* Ajustes de ancho y centrado del contenedor */
  width: 90%; /* Ajustamos a 90% para que no toque los bordes */
  max-width: 600px;
  margin: 20px auto;
  padding: 0;
  box-sizing: border-box; /* Aseguramos que el padding no afecte el ancho */
}
.admin-actions .btn {
  width: 100%; /* Botones ocupan todo el ancho disponible en columna */
  margin: 0; /* Eliminamos margen para que gap funcione */
  /* text-align: center; Ya definido en .btn */
}

/* Media query para alinear botones en fila en escritorio */
@media (min-width: 600px) {
    .admin-actions {
        flex-direction: row; /* Botones en fila en escritorio */
        flex-wrap: wrap; /* Permitir que los botones salten de línea si no caben */
        justify-content: center; /* Centrar el grupo de botones */
        align-items: center; /* Alinear verticalmente los botones en la fila */
        width: 75%; /* Ancho ajustado para escritorio */
        margin: 20px auto; /* Centrar el contenedor en escritorio */
    }
     .admin-actions .btn {
         width: auto; /* Ancho automático basado en contenido/flex-basis */
         flex-grow: 1; /* Permitir que los botones crezcan para llenar el espacio */
         flex-basis: 0; /* Base de ancho inicial para flex-grow */
         min-width: 180px; /* Ancho mínimo para evitar que se hagan demasiado pequeños */
         margin: 5px; /* Restauramos el margen entre botones en escritorio */
     }
}


/* --- Mensajes de Estado --- */
.status-message {
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
}

.status-success {
    background-color: #dff0d8; /* Verde claro */
    color: #3c763d; /* Verde oscuro */
    border: 1px solid #d6e9c6;
}

.status-error {
    background-color: #f2dede; /* Rojo claro */
    color: #a94442; /* Rojo oscuro */
    border: 1px solid #ebccd1;
}


/* --- Tablas Generales --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Asegurar que los bordes redondeados se apliquen */
    /* Eliminamos display: block; y overflow-x: auto; de la regla general
       para aplicar el enfoque apilado en móvil */
}

.data-table th,
.data-table td {
    border: 1px solid var(--border); /* Borde gris */
    padding: 10px;
    text-align: left; /* Alineación por defecto */
}

.data-table th {
    background-color: var(--green); /* Encabezado de tabla en color principal (Verde) */
    color: var(--white); /* Texto claro */
    font-weight: bold;
}

/* Estilos para encabezados de tablas de admin (opcional, si quieres diferenciarlos) */
.admin-table th {
     background-color: var(--blue); /* Encabezado de tabla de admin en color secundario (Azul) */
}


.data-table tbody tr:nth-child(even) {
    background-color: var(--light-bg); /* Fondo gris claro para filas pares */
}

.data-table tbody tr:hover {
    background-color: #ddd; /* Fondo al pasar el mouse */
}

/* Estilos para la fila total en reportes */
.data-table .total-row td {
    font-weight: bold;
    background-color: var(--yellow); /* Color Accent (Amarillo) para la fila total */
    color: var(--text-dark); /* Texto oscuro para contraste */
}
.data-table .total-row td:first-child {
    text-align: right; /* Alinear el texto "Total del Reporte" a la derecha */
}

.data-table .col-earnings {
    text-align: right; /* Alinear montos a la derecha */
    white-space: nowrap; /* Evitar salto de línea */
}
.data-table .col-actions {
    text-align: center; /* Centrar acciones */
    white-space: nowrap;
    width: 120px; /* Ancho fijo para la columna de acciones */
}
.data-table .col-actions a {
    margin: 0 5px;
}
.data-table .col-actions .delete-link {
    color: var(--red); /* Color Danger (Rojo) para eliminar */
}


/* --- Estilos para hacer las tablas responsive (apiladas en móviles) --- */
@media (max-width: 600px) {

    .data-table {
        border: 0;
        box-shadow: none; /* Eliminar sombra en modo apilado */
    }

    .data-table thead {
        display: none; /* Ocultar encabezados de columna */
    }

    .data-table tr {
        border-bottom: 3px solid var(--border); /* Añadir un borde grueso entre filas (registros) */
        display: block; /* Cada fila se convierte en un bloque */
        margin-bottom: 15px; /* Espacio entre registros apilados */
        background-color: var(--white); /* Fondo blanco para cada bloque de fila */
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden; /* Asegurar bordes redondeados */
    }

    .data-table td {
        border-bottom: 1px solid var(--light-bg); /* Borde más ligero entre celdas (campos) */
        display: block; /* Cada celda se convierte en un bloque */
        text-align: right; /* Alineación por defecto de los valores en móvil */
        padding-left: 50%; /* Espacio para la pseudo-etiqueta */
        position: relative; /* Necesario para posicionar la pseudo-etiqueta */
        white-space: normal; /* Permitir que el texto se envuelva */
        word-wrap: break-word; /* Asegurar que palabras largas se rompan */
    }

    .data-table td::before {
        content: attr(data-label); /* Muestra el texto del atributo data-label */
        position: absolute;
        left: 10px; /* Posición de la etiqueta */
        width: 45%; /* Ancho de la etiqueta */
        padding-right: 10px;
        white-space: nowrap; /* Evitar que la etiqueta se envuelva */
        font-weight: bold;
        text-align: left; /* Alinear la etiqueta a la izquierda */
        color: var(--text-medium); /* Color para la etiqueta */
        overflow: hidden; /* Ocultar si la etiqueta es demasiado larga */
        text-overflow: ellipsis; /* Añadir puntos suspensivos si se corta */
    }

    /* Ajustes específicos para la fila total en modo apilado */
    .data-table .total-row td {
        text-align: right; /* Asegurar alineación a la derecha */
        padding-left: 10px; /* Eliminar padding extra de la etiqueta */
        font-weight: bold;
        background-color: var(--yellow); /* Mantener color de fondo */
        color: var(--text-dark); /* Mantener color de texto */
    }
     .data-table .total-row td:first-child::before {
         content: none; /* Eliminar la pseudo-etiqueta en la primera celda de la fila total */
     }


    /* Ajustes para columnas específicas en modo apilado si es necesario */
    /* Por ejemplo, si quieres centrar las acciones en móvil */
     .data-table .col-actions {
          text-align: center; /* Centrar acciones en móvil */
          padding-left: 10px; /* Ajustar padding si se centra */
     }
     .data-table .col-actions::before {
          content: attr(data-label); /* Mantener etiqueta */
          text-align: left; /* Etiqueta a la izquierda */
          width: auto; /* Ancho automático */
          position: static; /* Posición normal */
          display: inline-block; /* Comportamiento inline-block */
          margin-right: 10px; /* Espacio entre etiqueta y acciones */
          font-weight: bold;
          color: var(--text-medium);
     }
     .data-table .col-actions a {
          display: inline-block; /* Asegurar que los enlaces de acción se muestren inline */
          margin: 0 5px; /* Espacio entre iconos de acción */
     }


     /* Ajuste para títulos h1 en móviles */
     h1 {
         color: var(--text-dark); /* Color negro para h1 en móviles */
         text-align: left; /* Alinear a la izquierda en móviles */
         width: 100%; /* Ocupar 100% del ancho */
         box-sizing: border-box;
         padding: 0 10px; /* Añadir un poco de padding horizontal */
         font-size: 1.8em; /* Ajustar tamaño de fuente */
         white-space: normal;
         word-wrap: break-word;
     }

} /* Fin de la media query para móviles */

/* Ajuste para títulos h1 en escritorio (mantener color verde por defecto) */
@media (min-width: 601px) {
    h1 {
        color: var(--green); /* Color principal (Verde) en escritorio */
        text-align: center; /* Centrar en escritorio */
        width: auto; /* Ancho automático */
        padding: 0;
        font-size: 2em; /* Tamaño de fuente normal en escritorio */
         white-space: normal;
         word-wrap: break-word;
    }
}


/* --- Estilos Específicos de Páginas --- */

/* Login Page */
.login-container {
    background-color: var(--white); /* Fondo blanco */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center; /* Centrar contenido dentro del contenedor */
    width: 100%; /* Ocupar todo el ancho en móvil */
    max-width: 400px; /* Ancho máximo en pantallas más grandes */
    /* Eliminamos margin: 20px auto; ya que el main-content lo centra */
    /* margin: 20px auto; */
}

.login-logo {
    margin-bottom: 20px; /* Espacio debajo del logo */
    /* Si usas un <img>, asegúrate de que tenga max-width: 100% y height: auto; */
}

.login-logo i {
    color: var(--green); /* Color del icono del logo */
    /* Tamaño del icono definido en el HTML (fa-3x) */
}

.login-container h1 {
    /* Ajustar estilos para el título "Iniciar Sesión" si es necesario */
    color: var(--text-dark); /* Color oscuro */
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 25px;
}

.login-container h2 {
     /* Estilo para el título "NATURE JOB" debajo del icono */
     color: var(--text-medium); /* Color medio */
     font-size: 1.2em;
     margin-top: 10px;
     margin-bottom: 0; /* Eliminar margen inferior si h1 va después */
}


/* Estilos para el contenedor de icono dentro del form-group */
.form-group .input-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-medium); /* Color del icono del input */
}
.form-group input[type="text"].with-icon,
.form-group input[type="password"].with-icon {
    padding-left: 40px; /* Ajustar padding para dejar espacio al icono */
}


/* Reutilizamos .form-group y .btn-full-width */


/* Worker Dashboard */
.welcome-message {
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-medium); /* Texto medio */
}

.summary-section {
    margin-bottom: 30px;
    padding: 15px;
    background-color: #e9ffe9; /* Fondo verde muy claro */
    border-left: 5px solid var(--green); /* Borde izquierdo verde */
    border-radius: 4px;
}
.summary-section h3 {
    margin-top: 0;
    color: var(--text-dark); /* Texto oscuro */
    margin-bottom: 10px;
}
.summary-item {
    margin-bottom: 8px;
    font-size: 1.1em;
}
.summary-item strong {
    color: #006400; /* Verde oscuro */
}

.action-buttons {
    display: flex;
    gap: 15px;
    flex-direction: column; /* Apilar en móviles */
    justify-content: center; /* Centrar botones en el eje principal (vertical en móvil) */
    align-items: center; /* Centrar botones en el eje cruzado (horizontal en móvil) */
    margin-top: 20px;
}
/* Reutilizamos .btn, .btn-primary (.btn-full), .btn-secondary (.btn-half) */
.action-buttons .btn {
     flex-grow: 1;
     flex-basis: 0;
     min-width: 150px;
     width: 100%; /* Ocupar todo el ancho en móvil */
     margin: 0; /* Eliminar margen para que gap funcione */
     /* text-align: center; Ya definido en .btn */
}
/* Clases específicas para los botones de jornada */
.btn-full {
    background-color: var(--green); /* Verde */
    color: var(--white); /* Texto claro */
}
.btn-full:hover {
    background-color: var(--green-dark);
}
.btn-half {
    background-color: #8BC34A; /* Verde más claro */
    color: var(--white); /* Texto claro */
}
 .btn-half:hover {
    background-color: #7cb342;
}

/* Media query para alinear botones de jornada en fila en escritorio */
@media (min-width: 600px) {
    .action-buttons {
        flex-direction: row; /* Botones en fila en escritorio */
        flex-wrap: wrap; /* Permitir que los botones salten de línea si no caben */
        justify-content: center; /* Centrar el grupo de botones */
        align-items: center; /* Alinear verticalmente los botones en la fila */
    }
     .action-actions .btn { /* Corregido: usar .admin-actions */
         width: auto; /* Ancho automático basado en contenido/flex-basis */
         flex-grow: 1; /* Permitir que los botones crezcan para llenar el espacio */
         flex-basis: 0; /* Base de ancho inicial para flex-grow */
         min-width: 180px; /* Ancho mínimo */
         margin: 5px; /* Restauramos el margen entre botones en escritorio */
     }
}


/* Add Worker / Edit Worker / Add User / Edit User Forms */
/* Reutilizamos .main-content, .form-group, .btn, .btn-primary, .btn-secondary, etc. */
/* Los estilos específicos de los formularios se pueden manejar con clases en el form si es necesario */
.user-form, .edit-form {
    /* Estilos específicos si son necesarios */
}

.worker-select-group {
    display: none; /* Oculto por defecto */
}
.worker-select-group.active {
    display: block; /* Mostrar cuando tenga la clase active */
}


/* Admin Reports */
.report-controls {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #e3f2fd; /* Fondo azul muy claro */
    border-left: 5px solid var(--blue); /* Borde izquierdo azul */
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
 .report-controls .form-group {
     margin-bottom: 0;
     flex-grow: 1;
 }
 .report-controls label {
     font-weight: bold;
     margin-right: 10px;
     display: block;
     margin-bottom: 5px;
 }
.report-controls select,
.report-controls button {
    padding: 10px;
    border: 1px solid var(--border); /* Borde gris */
    border-radius: 4px;
    font-size: 1em;
}
.report-controls select {
     width: 100%;
     box-sizing: border-box;
}
/* Reutilizamos .btn para los botones de filtro */
.report-controls button[type="submit"] {
     background-color: var(--blue); /* Azul para el botón de filtro */
     color: var(--white); /* Texto claro */
}
.report-controls button[type="submit"]:hover {
     background-color: var(--blue-dark); /* Azul oscuro para hover */
}

/* Estilo específico para el botón PDF */
.report-controls .btn-pdf {
     background-color: var(--red); /* Color Danger (Rojo) para PDF */
     color: var(--white); /* Texto claro */
}
 .report-controls .btn-pdf:hover {
     background-color: var(--red-dark); /* Rojo oscuro para hover */
 }


/* Media query para alinear elementos en escritorio */
@media (min-width: 600px) {
    .report-controls {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .report-controls .filter-form {
         display: flex;
         gap: 15px;
         align-items: flex-end;
         flex-grow: 1;
    }
    .report-controls label {
         display: inline-block;
         margin-bottom: 0;
    }
    .report-controls select {
        width: auto;
        flex-grow: 0;
    }
    /* Ajustar ancho de botones en escritorio si es necesario */
    .report-controls button {
         width: auto;
         flex-grow: 0;
    }
}

/* Mensaje si no hay datos */
.no-data {
    text-align: center;
    margin-top: 20px;
    font-size: 1.1em;
    color: var(--text-medium); /* Texto medio */
}

/* Estilos para el contenedor del botón Añadir (en listas de gestión) */
.add-button-container {
     text-align: right;
     margin-bottom: 20px;
}
/* Reutilizamos .btn-primary (.btn) para el botón de añadir */
.add-button-container .btn {
    /* Ya definidos en .btn y .btn-primary */
}

/* --- Estilos para el Resumen General del Admin (Nuevo) --- */
.admin-summary {
    margin-bottom: 30px;
    padding: 20px; /* Aumentar padding */
    background-color: var(--white); /* Fondo blanco */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center; /* Centrar contenido */
}

.admin-summary h3 {
    color: var(--text-dark); /* Color de texto oscuro para el título del resumen */
    margin-bottom: 20px;
}

.summary-items-container {
    display: flex;
    flex-direction: column; /* Apilar items en móvil */
    gap: 20px; /* Espacio entre los items del resumen */
    justify-content: center; /* Centrar items horizontalmente en flexbox */
    align-items: center; /* Centrar items verticalmente en flexbox (si flex-direction es column) */
}

.admin-summary-item {
    display: flex; /* Usar flexbox para alinear icono, label y value */
    align-items: center; /* Alinear verticalmente */
    gap: 15px; /* Espacio entre icono/info */
    padding: 15px;
    background-color: var(--light-bg); /* Fondo ligeramente gris para cada item */
    border-left: 5px solid var(--green); /* Borde izquierdo verde */
    border-radius: 4px;
    width: 100%; /* Ocupar todo el ancho disponible */
    max-width: 400px; /* Ancho máximo para cada item */
    box-sizing: border-box;
    text-align: left; /* Alinear texto a la izquierda dentro del item */
}

.admin-summary-item:last-child {
    border-left-color: var(--blue); /* Borde izquierdo azul para el segundo item (pagos) */
}

.summary-icon {
    color: var(--green); /* Color del icono (verde por defecto) */
    /* Ajustar tamaño del icono si es necesario */
}

.admin-summary-item:last-child .summary-icon {
    color: var(--blue); /* Color azul para el icono de pagos */
}

.summary-info {
    flex-grow: 1; /* Permite que la información ocupe el espacio restante */
}

.summary-label {
    font-size: 1em;
    color: var(--text-medium); /* Texto medio para la etiqueta */
    margin-bottom: 5px;
}

.summary-value {
    font-size: 1.4em; /* Aumentar tamaño de fuente para el valor */
    font-weight: bold;
    color: var(--text-dark); /* Texto oscuro para el valor */
}

/* Media query para mostrar items del resumen en fila en escritorio */
@media (min-width: 600px) {
    .summary-items-container {
        flex-direction: row; /* Items en fila en escritorio */
        flex-wrap: wrap; /* Permitir que salten de línea si no caben */
        justify-content: center; /* Centrar el grupo de items */
        gap: 30px; /* Mayor espacio entre items en escritorio */
    }

    .admin-summary-item {
        flex-direction: column; /* Icono arriba, info abajo */
        align-items: center; /* Centrar contenido verticalmente */
        text-align: center; /* Centrar texto dentro del item */
        width: 200px; /* Ancho fijo para los items en escritorio */
        max-width: none; /* Eliminar max-width */
        padding: 20px; /* Aumentar padding */
    }

     .summary-icon {
         margin-bottom: 10px; /* Espacio entre icono y texto */
     }

     .summary-label {
         margin-bottom: 0; /* Eliminar margen inferior */
     }

     .summary-value {
         margin-top: 5px; /* Espacio entre label y value */
     }
}


/* Nota: Para agregar iconos a los botones o elementos del menú,
   necesitarías modificar el HTML de cada página PHP para incluir
   un elemento de icono (como <i> de Font Awesome, un SVG, o un emoji)
   dentro del botón o enlace, y luego usar CSS para estilizar ese icono.
   Esto no se puede hacer solo con CSS. */