/* style.css - Versión renovada Web 2.0 (inspirada en Yahoo 2010) */

:root {
    --color-primario: #0077cc;
    --color-secundario: #2c3e50;
    --color-fondo: #f4f6f9;
    --color-texto: #333;
    --color-blanco: #fff;

    --color-exito-bg: #e6f9e6;
    --color-exito-borde: #2ecc71;
    --color-error-bg: #fdecea;
    --color-error-borde: #e74c3c;

    --sombra-suave: 0 2px 6px rgba(0,0,0,0.1);
    --sombra-media: 0 2px 8px rgba(0,0,0,0.05);
}

/* Reset básico */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-fondo);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-texto);
}

h1, h2, h3 {
    color: var(--color-secundario);
    margin-top: 0;
}

/* HEADER Y NAV (para uso en header.php o admin-header.php) */
header {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    padding: 20px;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.navbar li {
    margin-right: 20px;
}
.navbar a {
    color: var(--color-blanco);
    text-decoration: none;
    font-weight: 500;
}
.navbar a:hover {
    text-decoration: underline;
}

/* FOOTER */
footer.main-footer {
    background-color: #e0e6ed;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    color: #555;
}

/* SECCIÓN RESUMEN SUPERIOR (index.php) */
.resumen {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background-color: #e0e6ed;
    border-bottom: 1px solid #ccc;
    flex-wrap: wrap;
    gap: 20px;
}
.resumen-box {
    text-align: center;
    flex: 1 1 30%;
    min-width: 260px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--color-blanco);
    box-shadow: var(--sombra-suave);
}
.resumen-box button {
    background-color: var(--color-primario);
    border: none;
    color: var(--color-blanco);
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}
.resumen-box p {
    font-size: 20px;
    font-weight: bold;
    margin-top: 10px;
}
.balance.positivo {
    background-color: var(--color-exito-bg);
    border: 1px solid var(--color-exito-borde);
}
.balance.negativo {
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-borde);
}

/* TABLAS */
.tabla {
    width: 90%;
    margin: 30px auto;
    background-color: var(--color-blanco);
    border-radius: 10px;
    box-shadow: var(--sombra-media);
    padding: 20px;
}
.tabla h2 {
    text-align: center;
    margin-bottom: 20px;
}
.tabla table {
    width: 100%;
    border-collapse: collapse;
}
.tabla th, 
.tabla td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}
.tabla th {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

/* PROYECTOS */
.proyectos {
    width: 90%;
    margin: 40px auto;
    padding: 20px;
}
.proyecto {
    background-color: var(--color-blanco);
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: var(--sombra-suave);
}

/* GALERÍA */
.galeria {
    width: 90%;
    margin: 40px auto;
}
.imagenes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.imagen {
    background-color: var(--color-blanco);
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
    padding: 10px;
    text-align: center;
    width: 180px;
}
.imagen img {
    max-width: 100%;
    border-radius: 8px;
}

/* BLOG */
.blog {
    width: 90%;
    margin: 40px auto;
}
.post {
    background-color: var(--color-blanco);
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--sombra-suave);
}
.post h3 {
    margin: 0 0 10px 0;
}
.post small {
    color: #888;
}

/* ADMIN PANEL */
.admin-panel {
    width: 90%;
    margin: 40px auto;
    background-color: var(--color-blanco);
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
}
.admin-panel h1 {
    text-align: center;
    margin-bottom: 20px;
}
.tabs {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding: 0;
}
.tabs li {
    margin: 0 10px;
}
.tabs li a {
    text-decoration: none;
    color: var(--color-primario);
    padding: 8px 16px;
    border: 1px solid var(--color-primario);
    border-radius: 4px;
}
.tabs li a:hover {
    background-color: var(--color-primario);
    color: var(--color-blanco);
}

/* ADMIN SECTION */
.admin-section {
    background-color: var(--color-blanco);
    padding: 15px;
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
    margin-bottom: 20px;
}

/* LOGIN (Si lo usas) */
.login-container {
    width: 320px;
    margin: 100px auto;
    background-color: var(--color-blanco);
    padding: 20px;
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
}
.login-container h1 {
    text-align: center;
    margin-bottom: 20px;
}
.login-container .error {
    color: var(--color-error-borde);
    margin-bottom: 10px;
}
.login-container form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
.login-container form input[type="text"],
.login-container form input[type="password"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.login-container form button {
    width: 100%;
    padding: 10px;
    background-color: var(--color-primario);
    border: none;
    color: var(--color-blanco);
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
}
.login-container form button:hover {
    background-color: #005fa3;
}
/* Estilos para formularios dentro del panel de administración */
.admin-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--color-blanco);
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
    padding: 20px;
    margin-bottom: 20px;
}

.admin-form h2 {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--color-secundario);
}

.admin-form label {
    font-weight: bold;
    margin-bottom: 2px;
}

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="date"],
.admin-form input[type="file"],
.admin-form textarea,
.admin-form select {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    width: 100%;
    max-width: 400px; /* Si quieres un ancho máximo */
}

.admin-form textarea {
    resize: vertical; /* Permitir que el usuario cambie el tamaño vertical */
}

.admin-form button[type="submit"] {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    max-width: 150px;
}

.admin-form button[type="submit"]:hover {
    background-color: #005fa3; /* Un tono más oscuro del primario */
}
/* ========== FORMULARIO EN GRID PROFESIONAL ========== */
.admin-form {
    background-color: var(--color-blanco);
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
    padding: 20px;
    margin-bottom: 20px;
}

/* Contenedor en grid para acomodar campos en columnas/filas */
.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
    gap: 16px; /* Espacio entre filas y columnas */
}

/* Cada grupo de campo (label + input) */
.admin-form-grid .form-group {
    display: flex;
    flex-direction: column;
}

/* Label y campos */
.admin-form-grid .form-group label {
    margin-bottom: 6px;
    font-weight: bold;
}
.admin-form-grid .form-group input,
.admin-form-grid .form-group textarea,
.admin-form-grid .form-group select {
    font-size: 16px;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    width: 100%;
}
.admin-form-grid .form-group textarea {
    resize: vertical; /* Permitir cambiar altura */
}

/* Para elementos que deban ocupar todo el ancho (2 columnas) */
.admin-form-grid .full-width {
    grid-column: 1 / span 2; /* Ocupa ambas columnas */
}

/* El botón de guardar abarcando las 2 columnas */
.admin-form-grid button[type="submit"] {
    grid-column: 1 / span 2;
    justify-self: center; /* Centrar el botón en el grid */
    padding: 10px 20px;
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}
.admin-form-grid button[type="submit"]:hover {
    background-color: #005fa3; /* Un tono más oscuro */
}
.tarea-vencida {
  background-color: #fdecea; /* o el color que quieras */
}
.estado-pendiente  { background-color: #fff8d2; }
.estado-completado { background-color: #d4f5d4; }
.estado-en-proceso { background-color: #cdeafc; }
.estado-rezagado   { background-color: #fbd1d1; }