@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --navy-950:#070f1e;
  --navy-900:#0b1a30;
  --navy-800:#0f2a4a;
  --steel-600:#3b6ea5;
  --silver-300:#c7cdd6;
  --silver-100:#e8eaee;
  --platinum-50:#f5f6f8;
  --ink-900:#12161c;
  --ink-600:#4a5563;
  --gold-400:#e8b93e;
  --red-500:#c0392b;
  --orange-500:#d9822b;
  --green-600:#2f8f5b;
  --line:#d7dce3;
  --radius:3px;
  --sidebar-w:240px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Work Sans', sans-serif;
  background:var(--platinum-50);
  color:var(--ink-900);
  line-height:1.5;
}
h1,h2,h3,h4{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.02em; color:var(--navy-900);}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* ---------- LOGIN ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--navy-950) 0%, var(--navy-900) 50%, var(--navy-800) 100%);
  padding:20px;
}
.login-card{
  background:rgba(11,26,48,0.6); border:1px solid rgba(199,205,214,0.18);
  padding:44px 38px; width:100%; max-width:400px; backdrop-filter:blur(6px);
}
.login-card h1{color:#fff; font-size:1.4rem; margin-bottom:6px;}
.login-card .sub{color:var(--silver-300); font-size:0.85rem; margin-bottom:28px; font-family:'IBM Plex Mono',monospace;}
.field{margin-bottom:18px; display:flex; flex-direction:column; gap:6px;}

.field select, .field select option {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.85rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
}
.field label {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.88rem !important; /* Aumentado para mayor visibilidad */
    font-weight: 700 !important;
    color: #1e293b !important;    /* Tono oscuro con alto contraste */
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: inline-block;
}

.field input, .field select, .field textarea {
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    color: #0f172a; /* Reemplaza #fff por texto azul oscuro/negro */
    font-family: 'Work Sans', sans-serif;
    font-size: 0.95rem;
}

.login-card .field input{width:100%;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--gold-400); border-color:var(--gold-400);}
/* Botones en general (incluye "+ Nuevo Cliente / Proyecto") */
.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 0.88rem !important;  /* Letra más grande y legible */
    font-weight: 600 !important;
    padding: 10px 18px !important;  /* Mayor área de clic */
    border-radius: 6px !important;
    background-color: #0b1a30 !important; /* Azul oscuro corporativo */
    color: #f59e0b !important;            /* Texto dorado visible */
    border: 1px solid #f59e0b !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

/* Botón en estado normal (reposo) */
.btn-primary {
    background-color: #0b1a30 !important;
    color: #f59e0b !important;
    border: 1px solid #f59e0b !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

/* Botón al pasar el cursor (hover) */
.btn:hover {
    background-color: #f59e0b !important;
    color: #0b1a30 !important;
}

/* 1. Botón Dorado de Encabezado (.btn-gold) */
.btn-gold {
    background-color: var(--navy-950, #0b1a30) !important;
    color: var(--gold-400, #eab308) !important;
    border: 1px solid var(--gold-400, #eab308) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-gold:hover {
    background-color: var(--gold-400, #eab308) !important;
    color: var(--navy-950, #0b1a30) !important;
}

.btn-outline{border-color:var(--line); color:var(--ink-900);}
.btn-outline:hover{border-color:var(--steel-600); color:var(--steel-600);}
.btn-danger{border-color:rgba(192,57,43,0.4); color:var(--red-500);}
.btn-danger:hover{background:var(--red-500); color:#fff;}
/* 2. Tamaño de botón pequeño (.btn-sm) - Agrandado para mayor visibilidad */
.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.82rem !important; /* Subió de 0.7rem a 0.82rem */
}

.login-card .btn{width:100%; margin-top:8px;}
.login-error{background:rgba(192,57,43,0.15); border-left:3px solid var(--red-500); color:#f3c9c5; padding:10px 14px; font-size:0.85rem; margin-bottom:18px;}
.login-logo{display:flex; align-items:center; gap:12px; margin-bottom:30px;}
.login-logo img{height:44px;}

/* ---------- APP LAYOUT ---------- */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); background:var(--navy-950); color:var(--silver-300); flex-shrink:0;
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; overflow-y:auto;
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:22px 20px; border-bottom:1px solid rgba(199,205,214,0.12);}
.sidebar-brand img{height:32px;}
.sidebar-brand .name{font-family:'Oswald',sans-serif; color:#fff; font-size:0.95rem; letter-spacing:0.04em;}
.sidebar-nav{padding:16px 12px; flex:1;}
.sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; margin-bottom:2px; border-radius:var(--radius);
  font-family:'IBM Plex Mono',monospace; font-size:0.88rem; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--silver-300);
}
.sidebar-nav a:hover{background:rgba(255,255,255,0.05); color:#fff;}
.sidebar-nav a.active{background:rgba(232,185,62,0.12); color:var(--gold-400); border-left:2px solid var(--gold-400); padding-left:12px;}
.sidebar-nav .section-label{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; font-weight:700 !important; letter-spacing:0.08em; text-transform:uppercase; color:#cbd5e1 !important; margin-top:14px; margin-bottom:6px; padding-left:14px;}
.sidebar-footer{padding:16px 20px; border-top:1px solid rgba(199,205,214,0.12); font-size:0.78rem;}
.sidebar-footer .user{color:#fff; font-family:'IBM Plex Mono',monospace; font-size:0.75rem;}
.sidebar-footer .role{color:var(--silver-300); font-size:0.7rem; margin-bottom:10px;}

.main{margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{
  background:#fff; border-bottom:1px solid var(--line); padding:16px 30px;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar h2{font-size:1.1rem; margin:0;}
.content{padding:30px; flex:1;}

/* ---------- CARDS / TABLES ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:30px;}
.stat-card{background:#fff; border:1px solid var(--line); padding:20px; border-left:3px solid var(--steel-600);}
.stat-card .num{font-family:'Oswald',sans-serif; font-size:2rem; color:var(--navy-900);}
.stat-card .label{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-600); margin-top:4px;}
.stat-card.urgent{border-left-color:var(--red-500);}
.stat-card.warn{border-left-color:var(--orange-500);}

.panel{background:#fff; border:1px solid var(--line); margin-bottom:24px;}
.panel-head{padding:16px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
.panel-head h3{font-size:0.95rem;}
.panel-body{padding:22px;}

table{width:100%; border-collapse:collapse; font-size:0.9rem;}
table th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-600); padding:10px 14px; border-bottom:2px solid var(--line); background:var(--platinum-50);
}
table td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle;}
table tr:hover td{background:#fafbfc;}
.table-wrap{overflow-x:auto;}

.badge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:0.65rem; letter-spacing:0.05em; text-transform:uppercase; padding:4px 9px; border-radius:12px;}
.badge-gray{background:#eceff2; color:var(--ink-600);}
.badge-blue{background:#e4edf7; color:var(--steel-600);}
.badge-green{background:#e3f3ea; color:var(--green-600);}
.badge-red{background:#fbe7e5; color:var(--red-500);}
.badge-orange{background:#fbeadc; color:var(--orange-500);}
.badge-gold{background:#fbf1da; color:#a17a1f;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-grid .full{grid-column:1 / -1;}
.actions{display:flex; gap:8px; flex-wrap:wrap;}
.alert-box{padding:12px 16px; border-radius:var(--radius); margin-bottom:20px; font-size:0.88rem;}
.alert-success{background:#e3f3ea; border-left:3px solid var(--green-600); color:#1c5c3a;}
.alert-error{background:#fbe7e5; border-left:3px solid var(--red-500); color:#8a2a20;}
.empty-state{text-align:center; padding:50px 20px; color:var(--ink-600);}

.timeline{list-style:none; display:flex; flex-direction:column; gap:14px;}
.timeline li{padding-left:16px; border-left:2px solid var(--line); font-size:0.85rem;}
.timeline .ts{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--ink-600); display:block; margin-bottom:2px;}

.menu-toggle{display:none;}

@media (max-width: 900px){
  .sidebar{transform:translateX(-100%); transition:transform .25s ease; z-index:200;}
  .sidebar.open{transform:translateX(0);}
  .main{margin-left:0;}
  .menu-toggle{display:inline-flex;}
  .form-grid{grid-template-columns:1fr;}
}

/* Ocultar por defecto en escritorio */
.btn-ocultar-escritorio {
    display: none !important;
}

/* Mostrar únicamente en dispositivos móviles (pantallas menores a 768px) */
@media (max-width: 768px) {
    .btn-ocultar-escritorio {
        display: inline-block !important;
    }
}