/* =========================================================================
   Sistema de Gestión Agropecuaria — RED ENTRE RIOS
   Paleta: campo, tierra y cosecha. Tipografía: Fraunces (títulos) + Inter (UI)
   ========================================================================= */

:root{
    --color-bg: #F6F4EC;
    --color-surface: #FFFFFF;
    --color-primary: #33513F;
    --color-primary-dark: #223829;
    --color-primary-light: #4E7059;
    --color-accent: #B9862E;
    --color-accent-dark: #93691F;
    --color-text: #24281F;
    --color-text-muted: #6E6C5E;
    --color-border: #DFDAC8;
    --color-danger: #A3402F;
    --color-success: #3E7A4C;
    --color-warning: #B9862E;
    --sidebar-width: 236px;
    --radius: 6px;
}

*{ box-sizing: border-box; }

body{
    margin:0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

h1,h2,h3,h4{
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    color: var(--color-primary-dark);
    margin: 0 0 .4em 0;
}

a{ color: var(--color-primary); }

/* ---------- Layout general ---------- */
.app-shell{ display:flex; min-height:100vh; }

.sidebar{
    width: var(--sidebar-width);
    background: var(--color-primary-dark);
    color: #E8EADF;
    flex-shrink:0;
    display:flex;
    flex-direction: column;
    position: fixed;
    top:0; bottom:0; left:0;
    overflow-y:auto;
}
.sidebar .brand{
    padding: 20px 18px 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar .brand strong{
    font-family:'Fraunces', serif;
    font-size: 1.25rem;
    color:#fff;
    display:block;
}
.sidebar .brand span{
    font-size:.75rem;
    color: #C7CBB9;
}
.sidebar nav{ padding: 10px 0; flex:1; }
.sidebar .grupo-titulo{
    font-size:.7rem;
    text-transform: uppercase;
    letter-spacing:.06em;
    color: #8FA090;
    padding: 14px 18px 4px 18px;
}
.sidebar a.nav-link{
    display:block;
    padding: 9px 18px;
    color: #DCE0D2;
    text-decoration:none;
    border-left: 3px solid transparent;
    font-size:.92rem;
}
.sidebar a.nav-link:hover{ background: rgba(255,255,255,.06); }
.sidebar a.nav-link.activo{
    background: rgba(255,255,255,.08);
    border-left-color: var(--color-accent);
    color:#fff;
}
.sidebar .usuario-box{
    padding: 14px 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size:.85rem;
}
.sidebar .usuario-box .rol{
    display:inline-block;
    background: var(--color-accent);
    color:#2b2005;
    font-size:.68rem;
    padding:1px 8px;
    border-radius: 10px;
    margin-top:4px;
}
.sidebar .usuario-box a{ color:#E8C77A; font-size:.82rem; }

.main{
    margin-left: var(--sidebar-width);
    flex:1;
    padding: 26px 32px 50px 32px;
    max-width: 1180px;
}

.topbar{
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 22px;
    flex-wrap: wrap;
    gap:8px;
}
.topbar .fecha-hoy{ color: var(--color-text-muted); font-size:.85rem; }

/* ---------- Componentes ---------- */
.panel{
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin-bottom: 22px;
}

.grid-kpi{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.kpi{
    background: var(--color-surface);
    border:1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.kpi.acento{ border-left-color: var(--color-accent); }
.kpi.alerta{ border-left-color: var(--color-danger); }
.kpi .valor{ font-family:'Fraunces', serif; font-size:1.9rem; color:var(--color-primary-dark); line-height:1; }
.kpi .etiqueta{ font-size:.8rem; color: var(--color-text-muted); margin-top:4px; }

table{ width:100%; border-collapse: collapse; font-size:.92rem; }
th, td{ text-align:left; padding: 9px 10px; border-bottom: 1px solid var(--color-border); }
th{ color: var(--color-text-muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; }
tbody tr:hover{ background: #FBFAF5; }
.tabla-wrap{ overflow-x:auto; }

.badge{ display:inline-block; padding: 2px 9px; border-radius: 10px; font-size:.74rem; font-weight:600; }
.badge-activo{ background:#E4EFE6; color: var(--color-success); }
.badge-baja{ background:#F3E4E0; color: var(--color-danger); }
.badge-neutro{ background:#EFEDE3; color: var(--color-text-muted); }
.badge-alerta{ background:#F7E9D0; color: var(--color-accent-dark); }

.btn{
    display:inline-block;
    padding: 8px 16px;
    border-radius: var(--radius);
    border:1px solid transparent;
    font-size:.88rem;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    background: var(--color-primary);
    color:#fff;
}
.btn:hover{ background: var(--color-primary-dark); }
.btn-secundario{ background:transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-secundario:hover{ background:#F0EEE4; }
.btn-peligro{ background: var(--color-danger); }
.btn-peligro:hover{ background:#832F22; }
.btn-sm{ padding:4px 10px; font-size:.78rem; }

.acciones-fila{ display:flex; gap:8px; }

form .campo{ margin-bottom: 14px; }
form label{ display:block; font-size:.82rem; font-weight:600; color:var(--color-text-muted); margin-bottom:4px; }
input, select, textarea{
    width:100%;
    padding: 8px 10px;
    border:1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size:.92rem;
    background:#fff;
    color: var(--color-text);
}
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--color-primary-light); outline-offset:1px; }
.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0 18px; }
.form-acciones{ margin-top: 6px; display:flex; gap:10px; }

.tabs{ display:flex; gap:4px; margin-bottom: 18px; border-bottom: 1px solid var(--color-border); flex-wrap:wrap; }
.tabs a{
    padding: 8px 14px;
    text-decoration:none;
    color: var(--color-text-muted);
    font-size:.88rem;
    font-weight:600;
    border-bottom: 2px solid transparent;
    margin-bottom:-1px;
}
.tabs a.activo{ color: var(--color-primary-dark); border-bottom-color: var(--color-accent); }

.alerta-msg{ padding: 10px 14px; border-radius: var(--radius); margin-bottom:16px; font-size:.9rem; }
.alerta-msg.ok{ background:#E4EFE6; color:#1F4A2A; border:1px solid #BFDCC5; }
.alerta-msg.error{ background:#F3E4E0; color:#7A2B1C; border:1px solid #E3C0B4; }

.vacio{ color: var(--color-text-muted); font-style: italic; padding: 20px 0; }

.footer-credito{
    margin-top: 30px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size:.78rem;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    gap:6px;
}
.footer-credito a{ color: var(--color-text-muted); }

/* ---------- Login ---------- */
.login-wrap{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background: linear-gradient(160deg, var(--color-primary-dark), var(--color-primary));
}
.login-box{
    background: var(--color-surface);
    padding: 36px 34px;
    border-radius: 10px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.login-box h1{ font-size:1.5rem; margin-bottom:2px; }
.login-box p.sub{ color:var(--color-text-muted); font-size:.85rem; margin-bottom:22px; }
.login-box .btn{ width:100%; text-align:center; margin-top:6px; }

/* ---------- Responsive / uso a campo desde celular ---------- */
@media (max-width: 860px){
    .sidebar{ width: 100%; height:auto; position: static; }
    .app-shell{ flex-direction: column; }
    .main{ margin-left:0; padding: 18px 16px 40px 16px; }
    .sidebar nav{ display:none; }
    .sidebar.abierto nav{ display:block; }
    .sidebar .brand{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; }
}

/* ---------- Impresión / exportación a PDF desde el navegador ---------- */
@media print{
    .sidebar, .btn, .tabs, form, .no-imprimir, .footer-credito, .fecha-hoy{ display:none !important; }
    .main{ margin-left:0 !important; padding:0 !important; max-width:100% !important; }
    .panel{ border:none; padding:0; margin-bottom:18px; }
    body{ background:#fff; }
    table{ font-size:.85rem; }
    a[href]:after{ content:""; }
}