/* estilos-memorial.css */

/* --- ESTILOS COMPLETOS (Formulario + Panel) --- */

/* Reset básico y configuración de fuente */
body {
    font-family: 'Lato', sans-serif; /* Fuente principal legible */
    line-height: 1.6;
    background-color: #f4f7f6; /* Un gris muy claro, casi blanco */
    color: #333;
    margin: 0;
    padding: 0; /* Sin padding en body para que header/footer ocupen todo */
}

h1, h2 { /* Aplicar a ambos h1 y h2 del panel */
    font-family: 'Merriweather', serif; /* Fuente más elegante para títulos */
    color: #2c3e50; /* Azul oscuro/grisáceo */
    text-align: center;
    margin-bottom: 10px;
}

p { /* Estilo general de párrafo */
    color: #555;
    margin-bottom: 15px;
}

/* --- ESTILOS DEL FORMULARIO (DE crear-memorial.php) --- */
/* (Se mantienen por si se usan en modales o futuras ediciones) */

.form-container {
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    background-color: #ffffff; /* Fondo blanco para el formulario */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave */
    border-top: 5px solid #5d9cec; /* Un borde superior azul suave como acento */
}

.form-container h1 { /* Estilo específico para H1 del formulario */
     font-family: 'Merriweather', serif;
     color: #2c3e50;
     text-align: center;
     margin-bottom: 10px;
}
 .form-container p { /* Estilo específico para P del formulario */
     text-align: center;
     color: #555;
     margin-bottom: 30px;
}


fieldset {
    border: 1px solid #dce4ec; /* Borde suave para las secciones */
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: #fdfdff; /* Ligeramente diferente al fondo principal */
}

legend {
    font-family: 'Merriweather', serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #34495e; /* Azul/gris un poco más oscuro */
    padding: 0 10px;
    margin-left: 10px; /* Pequeño margen */
}

.form-group {
    margin-bottom: 20px;
    display: flex; /* Usar flexbox para alinear mejor */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan */
    align-items: center; /* Alinear verticalmente */
}

.form-group.half-width {
    width: calc(50% - 10px); /* Calcular ancho restando el espacio */
    margin-right: 20px;
}
.form-group.half-width:nth-child(even) {
     margin-right: 0;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: bold;
    flex-basis: 100%;
}

label.radio-label,
label.checkbox-label {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 15px;
    font-weight: normal;
    flex-basis: auto;
}

input[type="text"],
input[type="date"],
input[type="file"],
input[type="url"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    background-color: #fff;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="url"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: #5d9cec;
    outline: none;
    box-shadow: 0 0 5px rgba(93, 156, 236, 0.3);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

input[type="radio"],
input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

input[type="file"] {
    padding: 8px;
    background-color: #f9f9f9;
}

small {
    display: block;
    margin-top: 5px;
    color: #777;
    font-size: 0.9em;
    width: 100%;
}

.form-actions {
    text-align: center;
    margin-top: 30px;
}

.button-primary { /* Estilo base para botones primarios */
    background-color: #5d9cec; /* Azul suave */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-decoration: none; /* Para los enlaces que parecen botones */
    display: inline-block; /* Para que los enlaces se comporten como botones */
}

.button-primary:hover {
    background-color: #4a8cdb; /* Azul un poco más oscuro al pasar el ratón */
}

.button-primary:active {
    transform: translateY(1px); /* Efecto de presionar */
}


/* --- ESTILOS ADICIONALES PARA EL PANEL DE CLIENTE --- */

/* Contenedor general para centrar contenido */
.container {
    max-width: 1100px; /* Ancho máximo para el contenido del panel */
    margin: 0 auto;
    padding: 0 20px;
}

/* Cabecera del Panel */
.dashboard-header {
    background-color: #34495e; /* Azul/gris oscuro */
    color: #ecf0f1; /* Texto claro */
    padding: 15px 0;
    margin-bottom: 30px;
}

.dashboard-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-header h1 { /* Estilo específico para H1 del header */
    color: #ecf0f1;
    margin: 0;
    font-size: 1.8em;
    text-align: left; /* Alinear a la izquierda en header */
}

.dashboard-header nav span {
    margin-right: 15px;
}

.button-logout {
    color: #fff;
    background-color: #e74c3c; /* Rojo para logout */
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.button-logout:hover {
    background-color: #c0392b;
}

/* Sección de Acciones (Botón Crear) */
.dashboard-actions {
    margin-bottom: 30px;
    text-align: right; /* Alinear botón a la derecha */
}

.button-create {
   font-size: 1.1em; /* Hacerlo un poco más grande */
}


/* Contenedor de la tabla */
.table-container {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow-x: auto; /* Permitir scroll horizontal en pantallas pequeñas */
    margin-bottom: 30px; /* Espacio antes del footer */
}

.table-container h2 { /* Estilo para H2 dentro del contenedor de tabla */
    margin-top: 0;
    margin-bottom: 20px;
    color: #34495e;
    font-family: 'Merriweather', serif;
    text-align: left; /* Alinear a la izquierda */
}

/* Tabla del Panel */
.dashboard-table {
    width: 100%;
    border-collapse: collapse; /* Unir bordes */
    margin-top: 20px;
}

.dashboard-table th,
.dashboard-table td {
    border: 1px solid #dce4ec; /* Bordes suaves */
    padding: 12px 15px; /* Espaciado interno */
    text-align: left;
    vertical-align: middle; /* Alinear contenido verticalmente */
}

.dashboard-table th {
    background-color: #f4f7f6; /* Fondo ligeramente gris para cabeceras */
    font-weight: bold;
    color: #34495e;
}

.dashboard-table tbody tr:nth-child(even) {
    background-color: #fdfdff; /* Alternar colores de fila suavemente */
}

.dashboard-table tbody tr:hover {
    background-color: #eef4f8; /* Resaltar fila al pasar el ratón */
}

/* Input dentro de la tabla para editar etiqueta */
.input-inline {
    width: calc(100% - 75px); /* Ajustar ancho para dejar espacio al botón */
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block; /* Para que esté en línea con el botón */
    vertical-align: middle;
    font-size: 0.95em;
}

.inline-form {
    display: flex; /* Alinear input y botón */
    align-items: center;
}

/* Botones pequeños de acción dentro de la tabla */
.button-small {
    padding: 6px 10px;
    font-size: 0.9em;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    margin-right: 5px; /* Espacio entre botones */
    border: none;
    color: white !important; /* Asegurar color de texto blanco */
    display: inline-block; /* Asegurar que se muestren en línea */
    margin-bottom: 5px; /* Espacio si se apilan en móvil */
    text-align: center;
    transition: background-color 0.3s ease;
    vertical-align: middle; /* Alinear con el input */
}
/* Asegurar que los enlaces tipo botón pequeño tengan color blanco */
a.button-small {
    color: white !important;
}


.button-save {
    background-color: #2ecc71; /* Verde para guardar */
    min-width: 60px; /* Ancho mínimo para el botón guardar */
}
.button-save:hover {
    background-color: #27ae60;
}

.button-edit {
    background-color: #3498db; /* Azul para editar */
}
.button-edit:hover {
    background-color: #2980b9;
}

.button-view {
    background-color: #9b59b6; /* Morado para ver */
}
.button-view:hover {
    background-color: #8e44ad;
}

/* Botón QR */
.button-qr {
    background-color: #f39c12; /* Naranja para QR */
}
.button-qr:hover {
    background-color: #e67e22;
}


.button-delete {
    background-color: #e74c3c; /* Rojo para eliminar */
}
.button-delete:hover {
    background-color: #c0392b;
}

.actions-cell {
    white-space: nowrap; /* Evitar que los botones se partan en dos líneas */
}


/* Badges de Estado */
.status-badge {
    padding: 4px 8px;
    border-radius: 12px; /* Hacerlo más redondeado tipo píldora */
    font-size: 0.85em;
    font-weight: bold;
    color: white;
    text-transform: capitalize; /* Poner primera letra en mayúscula */
    display: inline-block; /* Para que el padding funcione bien */
}

.status-active, .status-published { background-color: #2ecc71; } /* Verde */
.status-inactive, .status-draft, .status-pending_payment, .status-pending { background-color: #f39c12; } /* Naranja */
.status-expired, .status-cancelled, .status-private { background-color: #e74c3c; } /* Rojo */
/* Añade más clases de estado según los definidos en tu ENUM */


/* Footer del Panel */
.dashboard-footer {
    margin-top: 40px;
    padding: 20px 0;
    text-align: center;
    color: #777;
    border-top: 1px solid #eee;
    background-color: #f9f9f9; /* Un fondo muy ligero para el footer */
}
 .dashboard-footer p {
    margin-bottom: 0; /* Quitar margen inferior del párrafo en footer */
 }

 /* Estilos para mensajes (ej. errores de login, éxito) */
.message {
    padding: 15px;
    margin: 20px auto;
    border-radius: 5px;
    max-width: 500px; /* Ancho para mensajes */
    text-align: center;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}


/* Ajustes responsivos para la tabla */
@media (max-width: 768px) {
    .dashboard-table thead {
        display: none;
    }
    .dashboard-table, .dashboard-table tbody, .dashboard-table tr, .dashboard-table td {
        display: block;
        width: 100%;
    }
    .dashboard-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
        background-color: #fff; /* Fondo blanco para cada tarjeta */
    }
     .dashboard-table tbody tr:nth-child(even) {
         background-color: #fff; /* Resetear alternancia en móvil */
    }

    .dashboard-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
        border: none;
        border-bottom: 1px dashed #eee;
        min-height: 30px; /* Altura mínima para evitar colapso */
        display: flex; /* Usar flex para mejor alineación vertical del contenido */
        align-items: center; /* Centrar verticalmente */
        justify-content: flex-end; /* Alinear contenido a la derecha */
    }
     .dashboard-table td:last-child {
        border-bottom: none;
    }
    .dashboard-table td::before {
        content: attr(data-label); /* Usar el data-label */
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        font-weight: bold;
        text-align: left;
        white-space: nowrap;
        color: #34495e; /* Color más oscuro para la etiqueta */
    }

     /* Ajustes específicos para la celda de acciones en móvil */
    .actions-cell {
         text-align: right; /* Alinear botones a la derecha */
         padding-left: 10px; /* Resetear padding izquierdo */
         padding-top: 10px;
         padding-bottom: 10px;
         display: flex; /* Usar flex para los botones */
         flex-wrap: wrap; /* Permitir que los botones bajen */
         justify-content: flex-end; /* Alinear a la derecha */
    }
     .actions-cell::before {
        display: none; /* No mostrar pseudo-etiqueta para acciones */
    }
     .actions-cell .button-small {
        margin-left: 5px; /* Espacio entre botones */
        margin-right: 0;
     }

     /* Ajustes para el form inline en móvil */
     .dashboard-table td[data-label="Nombre Referencia (Editable)"] {
         padding-top: 10px;
         padding-bottom: 10px;
     }
     .inline-form {
        flex-direction: row; /* Mantener en fila si hay espacio */
        align-items: center;
        justify-content: flex-end; /* Alinear a la derecha */
        width: 100%; /* Ocupar todo el espacio de la celda */
    }
     .input-inline {
        flex-grow: 1; /* Permitir que el input crezca */
        width: auto; /* Resetear ancho */
        margin-right: 5px;
        margin-bottom: 0;
    }
    .button-save {
         flex-shrink: 0; /* Evitar que el botón se encoja */
         width: auto; /* Ancho automático */
         margin-top: 0;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0; /* Quitar padding del body */
    }
    .container {
         padding: 0 10px; /* Menos padding en el contenedor */
    }
     .dashboard-header .container, .dashboard-footer .container {
         padding: 0 15px; /* Padding específico para header/footer */
    }
    .dashboard-header h1 {
        font-size: 1.5em;
    }
    .dashboard-header nav {
        font-size: 0.9em; /* Reducir tamaño de fuente en nav */
    }
     .button-logout {
         padding: 6px 10px;
    }
    .table-container {
        padding: 15px;
    }
    .dashboard-table td {
         padding-left: 45%; /* Ajustar padding para etiquetas */
         font-size: 0.95em;
    }
    .dashboard-table td::before {
         width: calc(45% - 15px); /* Ajustar ancho de etiqueta */
         left: 5px;
         font-size: 0.9em;
    }
     .input-inline {
         font-size: 0.9em;
    }
     .button-small {
         font-size: 0.85em;
         padding: 5px 8px;
    }
}