/* ==========================================================================
   Frontend del Control de Gastos.
   Se suma al admin.css (que ya tiene los paneles, tablas, tarjetas, etc.)
   y agrega todo lo propio de la página pública: login, tabs, topbar.
   ========================================================================== */

/* Resetear el tema de WordPress para que no interfiera mucho */
.cgastos-front-acceso,
.cgastos-front-app {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    color: #1d2327;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

/* ---- Pantalla de acceso (login + registro) ---- */
.cgastos-front-marca {
    text-align: center;
    margin-bottom: 28px;
}
.cgastos-front-marca h1 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #264653;
}
.cgastos-front-marca p {
    color: #6c757d;
    margin: 0;
}

.cgastos-front-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .cgastos-front-cols { grid-template-columns: 1fr; }
}

.cgastos-front-caja {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    padding: 24px 28px;
}
.cgastos-front-caja h2 {
    margin-top: 0;
    font-size: 18px;
    color: #264653;
}
.cgastos-front-caja label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}
.cgastos-front-caja input[type="text"],
.cgastos-front-caja input[type="email"],
.cgastos-front-caja input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 4px;
    box-sizing: border-box;
}
.cgastos-front-caja input:focus {
    border-color: #4f8a8b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(79,138,139,.15);
}

.cgastos-btn {
    display: inline-block;
    background: #264653;
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
.cgastos-btn:hover { background: #1d3640; }
.cgastos-btn-sec {
    background: #4f8a8b;
}
.cgastos-btn-sec:hover { background: #3e7172; }

.cgastos-front-link {
    text-align: center;
    font-size: 13px;
}
.cgastos-front-link a { color: #4f8a8b; }

/* Avisos */
.cgastos-front-aviso {
    max-width: 720px;
    margin: 0 auto 20px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
}
.cgastos-front-aviso.ok {
    background: #e3f4e8;
    color: #1a7f37;
    border: 1px solid #b7e4c7;
}
.cgastos-front-aviso.error {
    background: #f8d7da;
    color: #b32d2e;
    border: 1px solid #f1aeb5;
}

/* ---- App (logueado) ---- */
.cgastos-front-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #e2e4e7;
}
.cgastos-front-hola {
    font-weight: 600;
    font-size: 15px;
    color: #264653;
}
.cgastos-front-salir {
    font-size: 13px;
    color: #b32d2e;
    text-decoration: none;
}
.cgastos-front-salir:hover { text-decoration: underline; }

.cgastos-front-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    border-bottom: 2px solid #e2e4e7;
    padding-bottom: 0;
    overflow-x: auto;
}
.cgastos-front-tabs a {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.cgastos-front-tabs a:hover { color: #264653; }
.cgastos-front-tabs a.activa {
    color: #264653;
    border-bottom-color: #4f8a8b;
}

/* Eliminar el envoltorio .wrap de las vistas del admin cuando estamos en el frontend */
.cgastos-front-app .wrap {
    margin: 0;
    padding: 0;
}
.cgastos-front-app .wrap h1.cgastos-titulo {
    display: none; /* El título ya lo ponen las tabs */
}

/* En el frontend los formularios no tienen los estilos globales de wp-admin,
   así que ajustamos los campos para que se vean bien */
.cgastos-front-app input[type="text"],
.cgastos-front-app input[type="number"],
.cgastos-front-app input[type="date"],
.cgastos-front-app select {
    padding: 7px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}
.cgastos-front-app input:focus,
.cgastos-front-app select:focus {
    border-color: #4f8a8b;
    outline: none;
    box-shadow: 0 0 0 2px rgba(79,138,139,.15);
}

.cgastos-front-app .button,
.cgastos-front-app .button-primary {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f6f7f7;
    color: #1d2327;
    text-decoration: none;
}
.cgastos-front-app .button-primary {
    background: #264653;
    color: #fff;
    border-color: #264653;
}
.cgastos-front-app .button:hover { background: #eee; }
.cgastos-front-app .button-primary:hover { background: #1d3640; }
.cgastos-front-app .button-small { padding: 5px 12px; font-size: 12px; }

/* Tablas en frontend */
.cgastos-front-app .widefat {
    border: 1px solid #e2e4e7;
    border-collapse: collapse;
    width: 100%;
}
.cgastos-front-app .widefat th,
.cgastos-front-app .widefat td {
    border-bottom: 1px solid #eee;
}

@media (max-width: 640px) {
    .cgastos-front-app { padding: 12px; }
    .cgastos-front-tabs a { padding: 8px 12px; font-size: 13px; }
    .cgastos .cgastos-columnas { grid-template-columns: 1fr; }
}