/*
  Theme: Finca Riosucio - Contabilidad
  Objetivo: Estilo formal, sobrio y elegante para app contable
  Notas: Carga este archivo al final para sobreescribir estilos previos
*/

/* Design tokens */
:root {
    /* Colores base (azules/grises sobrios) */
    --color-bg: #f5f7fa;
    --color-surface: #ffffff;
    --color-primary: #0f3d6e; /* azul petróleo */
    --color-primary-600: #0b2d52;
    --color-secondary: #47637a;
    --color-accent: #1b998b; /* acento sobrio */
    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-success: #15803d;
    --color-warning: #b45309;
    --color-danger: #b91c1c;

    /* Tipografía */
    --font-sans: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
    --font-size-base: 14px;
    --line-height-base: 1.6;

    /* Radios / sombra */
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
}

/* Base */
html, body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

.layout-container {
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

/* Tipografía utilidades */
.text-muted { color: var(--color-text-muted) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }

/* Enlaces */
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-600); }

/* Botones (apoya estilos existentes) */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background-color: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
}

.btn-secondary { background-color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-accent { background-color: var(--color-accent); border-color: var(--color-accent); }
.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline:hover { color: #fff; }

/* Formularios */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select, textarea {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--color-text);
    box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(15, 61, 110, 0.12);
}

label { font-weight: 600; color: var(--color-text); }
.form-hint { color: var(--color-text-muted); font-size: 12px; }
.form-error { color: var(--color-danger); font-size: 12px; }

/* Tarjetas / paneles */
.card, .panel, .box, .table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-header, .panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-primary);
}

.card-body, .panel-body { padding: 16px; }

/* Tablas (DataTables + tablas simples) */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
table thead th {
    background: #f2f5f9;
    color: var(--color-text);
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}

table tbody td {
    border-bottom: 1px solid var(--color-border);
}

table tbody tr:hover { background: #f9fbfe; }

.table-striped tbody tr:nth-child(odd) { background: #fbfdff; }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--color-border) !important;
    background: #fff !important;
    border-radius: var(--radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current { 
    background: var(--color-primary) !important; 
    color: #fff !important; 
    border-color: var(--color-primary) !important;
}

/* Navegación principal */
.main-menu {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-600));
    border-radius: 8px;
}

nav.main-menu ul li a { font-weight: 600; letter-spacing: .2px; }
nav.main-menu ul li a:hover { background: rgba(255,255,255,.08); }

/* Header / Footer */
.header { padding: 16px 0; }
.welcome-msg { color: var(--color-text-muted); }
.btn-login, .btn-logout { border-radius: var(--radius-sm); }

.footer-entidad { background: var(--color-primary); }
.footer-header {
    background: #4f7093
}
.footer-left, .footer-socials a { color: #0b1f33; }

/* Utilidades */
.surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.elevate { box-shadow: var(--shadow-md); }
.divider { height: 1px; background: var(--color-border); margin: 12px 0; }
.muted { color: var(--color-text-muted); }

/* Estados */
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.badge-success { background: #e7f6ec; color: var(--color-success); }
.badge-warning { background: #fff4e5; color: var(--color-warning); }
.badge-danger { background: #fee2e2; color: var(--color-danger); }

/* Login links */
.auth-links a { color: var(--color-primary); font-weight: 600; }
.auth-links a:hover { color: var(--color-primary-600); }

/* Inputs numéricos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Tabler overrides mínimos */
.navbar, .navbar-expand-md { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.navbar-brand { color: var(--color-primary); font-weight: 700; }

/* Espaciados utilitarios */
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }

/* Utilitarios de tipografía y alineación */
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Columna numérica en tablas */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.currency::after { content: ' COP'; color: var(--color-text-muted); font-size: 12px; margin-left: 2px; }