/* --- Importación de Fuente --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* --- Variables CSS Globales --- */
:root {
    --color-primary: #f0db4f;
    --color-background: #1a1a1a;
    --color-container: #222222;
    --color-container-alt: #2a2a2a; /* Para filas alternas o fondos sutilmente diferentes */
    --color-header-bg: #1e1e1e;
    --color-table-header-bg: #333;
    --color-text-default: #e0e0e0;  /* Texto principal más suave */
    --color-text-muted: #c7c7c7;    /* Texto secundario/datos tabla */
    --color-text-dark: #1a1a1a;    /* Texto sobre fondos claros (botones) */
    --color-border: #555;          /* Borde más sutil */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

/* --- Estilos Base --- */
body {
    background-color: var(--color-background);
    color: var(--color-text-default);
    font-family: 'Inter', sans-serif; /* Fuente específica */
    margin: 0;
    padding: 0;
    font-size: 16px; /* Tamaño base */
    line-height: 1.6; /* Interlineado mejorado */
}

/* --- Layout Principal --- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: var(--space-lg) auto; /* Espaciado consistente */
    padding: var(--space-lg); /* Más padding interno */
    background-color: var(--color-container);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra suavizada */
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl); /* Más espacio inferior */
    padding: var(--space-md) var(--space-lg); /* Padding consistente */
    background-color: var(--color-header-bg);
}

header img {
    margin-right: var(--space-md); /* Espacio consistente */
    max-height: 66px; /* Tamaño aumentado (era 40px), aprox. 2/3 más grande */
    height: auto;      /* Mantiene la proporción al ajustar la altura máxima */
    border-radius: var(--border-radius-sm); /* Esquinas redondeadas (4px por defecto) */
    vertical-align: middle; /* Mejora la alineación vertical con otros elementos del header */
}

.header-right {
    margin-left: auto; /* Empuja este div hacia la derecha */
    display: flex; /* Asegura alineación de elementos internos si hay más */
    align-items: center;
}

.header-right .button {
    margin-left: var(--space-md); /* Espacio entre botones si hubiera más */
}

/* --- Títulos --- */
h1 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--space-lg); /* Espacio después del H1 */
    font-weight: 700;
    font-size: 1.8em; /* Tamaño de H1 */
}

/* Estilo para Títulos de Sección (añade esta clase a tus <h2> o equivalentes) */
.project-title {
    color: var(--color-primary);
    font-size: 1.5em;
    font-weight: 500;
    margin-top: var(--space-xl); /* Espacio antes del título */
    margin-bottom: var(--space-lg); /* Espacio antes de la tabla */
    padding-bottom: var(--space-md); /* Espacio antes del borde */
    border-bottom: 1px solid var(--color-border);
}

/* --- Botones --- */
.button-container {
    display: flex; /* Para mostrar los elementos en línea (horizontalmente) */
    flex-wrap: wrap; /* Permitir que los botones pasen a la línea siguiente si no caben */
    gap: var(--space-md);        /* Espacio entre los botones */
    margin-bottom: var(--space-xl); /* Espacio entre los botones y la lista de tareas */
}

.button {
    display: inline-block; /* Comportamiento en línea */
    padding: var(--space-sm) var(--space-md); /* Padding estándar */
    background-color: var(--color-primary);
    color: var(--color-text-dark);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    font-size: 1em;
    font-weight: 500;
    line-height: 1.4; /* Consistencia vertical */
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
}

.button:hover {
    background-color: #e0c83a; /* Amarillo un poco más oscuro */
    transform: translateY(-1px); /* Efecto sutil al pasar el mouse */
}

.button:active {
    transform: translateY(0); /* Efecto al presionar */
}

/* Estilo secundario (para "Historial", "Cerrar Sesión", etc.) */
.button.secondary {
    background-color: #555;
    color: var(--color-text-default);
}
.button.secondary:hover {
    background-color: #666;
    transform: translateY(-1px);
}
/* ¡Recuerda añadir class="button secondary" en tu HTML donde corresponda! */

/* --- Lista de Tareas (Tabla) --- */
.task-list {
    margin-top: var(--space-lg);
    overflow-x: auto; /* Permitir scroll horizontal en pantallas pequeñas si la tabla es muy ancha */
}

.task-list table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-lg);
}

.task-list th,
.task-list td {
    padding: var(--space-md); /* Padding consistente */
    text-align: left;
    vertical-align: middle; /* Alinear contenido verticalmente */
}

.task-list th {
    background-color: var(--color-table-header-bg);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* Evitar que los títulos se partan */
}

.task-list td {
    color: var(--color-text-muted); /* Texto de datos más suave */
}

/* Estilos de Fila */
.task-item {
    /* No necesita estilos base aquí si usamos nth-child */
    transition: background-color 0.2s ease-in-out;
    border-bottom: 1px solid var(--color-border); /* Añadir borde inferior a la fila */
}

/* Efecto Hover Sutil */
.task-item:hover {
    background-color: #383838;
    /* No transform, no box-shadow */
}

/* Zebra Striping (Filas Alternas) */
.task-list tr.task-item:nth-child(odd) {
    background-color: var(--color-container-alt);
}
.task-list tr.task-item:nth-child(odd):hover {
    background-color: #3f3f3f; /* Hover un poco más claro para impares */
}

.task-list .actions-cell {
    white-space: nowrap; /* Mantenemos por si acaso */
    display: flex;
    flex-direction: column; /* Cambiamos la dirección a columna para apilar verticalmente */
    justify-content: flex-start; /* Alinear los elementos al inicio de la columna */
    align-items: flex-start; /* Alinear los elementos al inicio (izquierda) */
    gap: var(--space-xs); /* Reducimos el espacio vertical entre los botones */
}

.task-list .actions-cell > a {
    margin-bottom: var(--space-xs); /* Añade un pequeño margen inferior entre los botones */
}

.task-list .actions-cell > a:last-child {
    margin-bottom: 0; /* Elimina el margen inferior del último botón */
}

/* Estilo específico para los botones "Editar" e "Historial" para que estén en línea */
.task-list .actions-cell > a:nth-child(1), /* Editar */
.task-list .actions-cell > a:nth-child(2) /* Historial */ {
    display: inline-block; /* Permite que estén en la misma línea si hay espacio */
    margin-right: var(--space-sm); /* Añade un espacio entre Editar e Historial */
    margin-bottom: 0; /* Evita el margen inferior para que estén en la misma línea */
}

/* Asegurarse de que el tercer botón ("Completar") se muestre en una nueva línea */
.task-list .actions-cell > a:nth-child(3) {
    display: block; /* Fuerza a que ocupe una nueva línea */
    margin-right: 0; /* Elimina el margen derecho innecesario */
}

/* Regla 2 ACTUALIZADA */
.task-list .actions-cell .button {
    padding: var(--space-xs) var(--space-sm); /* Mantenemos padding */
    font-size: 0.85em;                      /* Mantenemos tamaño de fuente */
    /* margin-left: var(--space-md); */ /* <- Eliminado */
    margin-right: 0;                      /* Mantenemos por si acaso */
}

/* Anchos Flexibles de Columna (Reemplaza los anchos fijos) */
.task-list th:nth-child(1), .task-list td:nth-child(1) { width: 8%; max-width: 80px; } /* Ambito */
.task-list th:nth-child(2), .task-list td:nth-child(2) { width: 25%; } /* Descripción */
.task-list th:nth-child(3), .task-list td:nth-child(3) { width: 8%; min-width: 80px; } /* Responsable */
.task-list th:nth-child(4), .task-list td:nth-child(4) { width: 8%; max-width: 80px; }  /* Prioridad */
.task-list th:nth-child(5), .task-list td:nth-child(5) { width: 8%; max-width: 80px; } /* Estado */
.task-list th:nth-child(6), .task-list td:nth-child(6) { width: 33%; } /* Detalle */
.task-list th:nth-child(7), .task-list td:nth-child(7) { width: 10%; max-width: 80px; } /* Acciones */

/* Anchos de Columna para la Tabla de Tareas Completadas */
.completed-tasks-table th:nth-child(1), .completed-tasks-table td:nth-child(1) { width: 15%; min-width: 120px; } /* Proyecto */
.completed-tasks-table th:nth-child(2), .completed-tasks-table td:nth-child(2) { width: 8%; } /* Ambito */
.completed-tasks-table th:nth-child(3), .completed-tasks-table td:nth-child(3) { width: 25%; } /* Descripción */
.completed-tasks-table th:nth-child(4), .completed-tasks-table td:nth-child(4) { width: 20%; min-width: 150px; } /* Responsable */
.completed-tasks-table th:nth-child(5), .completed-tasks-table td:nth-child(5) { width: 8%; min-width: 70px; } /* Estado */
.completed-tasks-table th:nth-child(6), .completed-tasks-table td:nth-child(6) { width: 22%; } /* Detalle del Estado */
.completed-tasks-table th:nth-child(7), .completed-tasks-table td:nth-child(7) { width: 7%;  padding-right: var(--space-md); }


/* Anchos de Columna para la Tabla de Tareas Historial */
.task-history-table th:nth-child(1), .task-history-table td:nth-child(1) { width: 25%; min-width: 80px; } /* fecha y Hora */
.task-history-table th:nth-child(2), .task-history-table td:nth-child(2) { width: 15%; min-width: 80px; } /* Usuario */
.task-history-table th:nth-child(3), .task-history-table td:nth-child(3) { width: 20%; min-width: 80px; } /* Campo Modificado */
.task-history-table th:nth-child(4), .task-history-table td:nth-child(4) { width: 35%; min-width: 80px; } /* Alcance Actualización */

/* --- Formulario de Edición --- */
.edit-task-form {
    margin-top: var(--space-lg);
}

.task-history-table .actions-cell {
    white-space: nowrap; /* Mantenemos por si acaso */
    display: flex;
    flex-direction: column; /* Cambiamos la dirección a columna para apilar verticalmente */
    justify-content: flex-start; /* Alinear los elementos al inicio de la columna */
    align-items: flex-start; /* Alinear los elementos al inicio (izquierda) */
    gap: var(--space-xs); /* Reducimos el espacio vertical entre los botones */
}

.task-history-table th,
.task-history-table td {
    padding: var(--space-md); /* Padding consistente */
    text-align: left;
    vertical-align: middle; /* Alinear contenido verticalmente */

}


.completed-tasks-table th,
.completed-tasks-table td {
    padding: var(--space-md); /* Padding consistente */
    text-align: left;
    vertical-align: middle; /* Alinear contenido verticalmente */

}

.edit-task-form > div {
    display: flex;
    flex-wrap: wrap; /* Permitir que el input baje si no cabe */
    align-items: flex-start;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md); /* Padding solo abajo */
    border-bottom: 1px solid var(--color-border);
}

.edit-task-form > div:last-child {
    border-bottom: none;
}

.edit-task-form label {
    width: 150px; /* Ancho fijo para etiquetas */
    margin-right: var(--space-lg); /* Espacio etiqueta-campo */
    margin-bottom: var(--space-sm); /* Espacio si el input baja */
    color: var(--color-text-muted); /* Color suave para etiquetas */
    font-size: 0.9em;
    font-weight: 500;
    padding-top: 8px; /* Alinear verticalmente con el input */
    flex-shrink: 0; /* Evitar que la etiqueta se encoja */
}

.edit-task-form span,
.edit-task-form input[type="text"],
.edit-task-form input[type="date"],
.edit-task-form textarea,
.edit-task-form select {
    flex-grow: 1; /* Ocupar espacio restante */
    min-width: 200px; /* Ancho mínimo para evitar que sean muy pequeños */
    padding: var(--space-sm);
    border: 1px solid #555; /* Borde estándar */
    border-radius: var(--border-radius-sm);
    background-color: var(--color-container-alt); /* Fondo oscuro */
    color: var(--color-text-default); /* Texto claro */
    font-size: 1em;
    font-family: inherit; /* Heredar fuente del body */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Estado Focus para Inputs */
.edit-task-form input:focus,
.edit-task-form textarea:focus,
.edit-task-form select:focus {
    outline: none;
    border-color: var(--color-primary); /* Borde amarillo al enfocar */
    box-shadow: 0 0 0 3px rgba(240, 219, 79, 0.25); /* Anillo de foco sutil */
}

.edit-task-form textarea {
    min-height: 80px;
}

/* Estilo para Texto No Editable (dentro del form) */
.edit-task-form > div > span {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-text-default);
    padding: var(--space-sm) 0; /* Padding vertical igual al input, horizontal 0 */
    display: block; /* Ocupar ancho */
    white-space: pre-wrap; /* Respetar saltos de línea */
    min-width: 200px; /* Mismo min-width que inputs */
    flex-grow: 1;
}

/* Estilos para inputs ocultos */
.edit-task-form input[type="hidden"] {
    display: none; /* Ocultarlos completamente */
}

/* --- Enlaces Generales (si no son botones) --- */
a {
   color: var(--color-primary); /* Enlaces amarillos por defecto */
   text-decoration: none; /* Sin subrayado por defecto */
}

a:hover {
   text-decoration: underline; /* Subrayado al pasar el mouse */
}

/* Quitar estilo de enlace a botones con tag <a> */
.button,
.button:hover {
    text-decoration: none;
}

/* Añadido para eliminar el borde inferior de la última fila */
.task-list tbody tr:last-child {
    border-bottom: none;
}