/* =========================================================
   Equipo Caseco — Admin Console (Gestión de Contratistas)
   Sistema de diseño (prototipo). Tokens + estilos base.
   Estética: sidebar claro + marca verde + bilingüe ES/EN.
   ========================================================= */

:root {
  /* Marca (verde) */
  --brand-50:  #eaf7f0;
  --brand-100: #d4efe0;
  --brand-200: #a9dfc1;
  --brand-500: #1f9d57;
  --brand-600: #168a4c;   /* botones principales */
  --brand-700: #0f6f3c;
  --brand-800: #0b5530;

  /* Neutros */
  --ink:       #111827;   /* gris 900 */
  --ink-soft:  #6b7280;   /* gris 500 */
  --ink-mute:  #9ca3af;
  --line:      #e8eaed;
  --line-soft: #f1f3f5;
  --surface:   #ffffff;
  --bg:        #f4f6f8;

  /* Sidebar (claro) */
  --side-bg:    #ffffff;
  --side-ink:   #4b5563;
  --side-hover: #f3f5f7;
  --side-active-bg: #eaf7f0;

  /* Estados */
  --ok:    #16a34a;
  --warn:  #d97706;
  --info:  #2563eb;
  --danger:#dc2626;

  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --shadow-md: 0 4px 14px rgba(16,24,40,.07);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

.sidebar {
  width: 244px;
  background: var(--side-bg);
  color: var(--side-ink);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.sidebar__brand {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.3rem 1.25rem 1.15rem;
}
.sidebar__logo {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; box-shadow: 0 6px 14px rgba(22,138,76,.28);
}
.sidebar__name { font-weight: 800; color: var(--brand-800); line-height: 1.05; font-size: 1.02rem; }
.sidebar__sub  { font-size: .66rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }

.nav { padding: .5rem .7rem; display: flex; flex-direction: column; gap: .12rem; flex: 1; }
.nav__sec { font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute); font-weight:700; padding:.85rem .75rem .4rem; }
.nav a {
  display: flex; align-items: center; gap: .8rem;
  padding: .62rem .75rem; border-radius: 9px;
  color: var(--side-ink); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .15s ease;
  position: relative;
}
.nav a:hover { background: var(--side-hover); color: var(--ink); transform: translateX(3px); }
.nav a.is-active {
  background: var(--side-active-bg);
  color: var(--brand-700);
  font-weight: 600;
}
.nav a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 4px;
  background: var(--brand-600);
  border-radius: 0 4px 4px 0;
}
.nav a.is-active svg { color: var(--brand-600); }
.nav a svg { width: 19px; height: 19px; color: var(--ink-mute); }

.sidebar__foot { padding: .6rem .7rem 1rem; border-top: 1px solid var(--line); }
.sidebar__user { display:flex; align-items:center; gap:.65rem; padding:.6rem .75rem; }
.sidebar__user img { width:34px; height:34px; border-radius:50%; }
.sidebar__user b { font-size:.86rem; display:block; color:var(--ink); }
.sidebar__user span { font-size:.74rem; color:var(--ink-mute); }

/* ---- Main column ---- */
.main { flex: 1; margin-left: 244px; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 66px; background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.5rem; position: sticky; top: 0; z-index: 30;
}
.topbar__title { font-size: 1.1rem; font-weight: 700; }
.topbar__search {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg); border: 1px solid var(--line);
  padding: .5rem .8rem; border-radius: 10px; color: var(--ink-soft);
  min-width: 260px;
}
.topbar__search input { border: 0; background: transparent; outline: none; flex: 1; font-size: .9rem; color: var(--ink); }
.topbar__spacer { margin-left:auto; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  color: var(--ink-soft); position: relative;
}
.icon-btn:hover { background: var(--bg); }
.dot { position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%; background: var(--danger); border:2px solid #fff; }

.avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  object-fit: cover;
}
.avatar--initials {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--brand-600);
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1;
  text-align: center;
}

.content { padding: 1.75rem; max-width: 1280px; width: 100%; }

/* ---- Cards & primitives ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 1.25rem 1.35rem; }

.grid { display: grid; gap: 1.1rem; }
.stat { display:flex; align-items:center; gap:1rem; padding: .5rem 0; }
.stat__icon { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; flex-shrink:0; transition: transform .2s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); }
.card:hover .stat__icon { transform: scale(1.05); }
.stat__val { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; line-height:1; }
.stat__label { color: var(--ink-soft); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:600; padding:.26rem .6rem; border-radius: 999px; }
.badge--new      { background:var(--brand-50); color:var(--brand-700); }
.badge--pending  { background:#fff7ed; color:#c2410c; }
.badge--review   { background:#eff6ff; color:#1d4ed8; }
.badge--urgent   { background:#fef2f2; color:#b91c1c; }
.badge--ok       { background:var(--brand-50); color:var(--brand-700); }
.badge--dot::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; display:inline-block; }

.btn {
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-weight:600; font-size:.88rem; padding:.6rem 1rem; border-radius:10px;
  border:1px solid transparent; text-decoration:none; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); white-space:nowrap;
}
.btn--primary { background: var(--brand-600); color:#fff; box-shadow: 0 6px 14px rgba(22,138,76,.2); }
.btn--primary:hover { background: var(--brand-700); transform: translateY(-1.5px); box-shadow: 0 8px 16px rgba(22,138,76,.3); }
.btn--primary:active { transform: translateY(0); box-shadow: 0 4px 8px rgba(22,138,76,.15); }
.btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--bg); transform: translateY(-1.5px); box-shadow: 0 4px 10px rgba(0,0,0,.04); }
.btn--ghost:active { transform: translateY(0); }
.btn--danger { background:#fff; border-color:#fca5a5; color:var(--danger); }
.btn--danger:hover { background:#fef2f2; transform: translateY(-1.5px); box-shadow: 0 4px 10px rgba(220,38,38,.08); }
.btn--danger:active { transform: translateY(0); }
.btn--soft { background: var(--brand-50); color: var(--brand-700); }
.btn--soft:hover { background: var(--brand-100); transform: translateY(-1.5px); }
.btn--soft:active { transform: translateY(0); }
.btn svg { width:16px; height:16px; }

.table { width:100%; border-collapse: collapse; }
.table th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:.7rem 1rem; border-bottom:1px solid var(--line); font-weight:600; }
.table td { padding:.95rem 1rem; border-bottom:1px solid var(--line-soft); font-size:.9rem; vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background: var(--bg); }
.th-sort { display:inline-flex; align-items:center; gap:.25rem; cursor:pointer; }
.th-sort svg { width:13px; height:13px; }

.section-title { font-size:1.02rem; font-weight:700; }
.muted { color: var(--ink-soft); }

/* ---- Form ---- */
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.74rem; font-weight:700; margin-bottom:.4rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.field label .en { color:var(--ink-mute); font-weight:500; }
.input, select.input, textarea.input {
  width:100%; padding:.7rem .85rem; border:1px solid var(--line); border-radius:10px;
  font-size:.92rem; outline:none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; background:#fff; color:var(--ink); font-family:inherit;
}
.input:hover:not(:disabled) { border-color: var(--ink-mute); }
.input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(31,157,87,.15); }
.input:disabled { background: var(--bg); color: var(--ink-soft); }

/* ---- Filters / pagination ---- */
.filter-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .8rem; border:1px solid var(--line); border-radius:10px; background:#fff; font-size:.85rem; font-weight:500; color:var(--ink-soft); cursor:pointer; }
.filter-btn:hover { background:var(--bg); }
.pager { display:flex; align-items:center; gap:.3rem; }
.pager button { min-width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:.85rem; cursor:pointer; color:var(--ink-soft); }
.pager button.is-active { background:var(--brand-600); color:#fff; border-color:var(--brand-600); }
.pager button:hover:not(.is-active) { background:var(--bg); }

/* ---- Mobile ---- */
.backdrop {
  display:block; position:fixed; inset:0;
  background:rgba(15,23,42,.4); z-index:39;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, backdrop-filter .3s ease;
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }
.menu-btn { display:none; }
.table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.is-open { transform: translateX(0); }
  .main { margin-left: 0; }
  .menu-btn { display:grid; }
  .topbar > .topbar__search { display:none; }
}

table.resp { min-width: 720px; }

@media (max-width: 760px) {
  /* Espaciado / topbar */
  .content { padding: 1rem; }
  .topbar { padding: 0 1rem; gap:.6rem; height:60px; }
  .topbar__title { font-size:1rem; }
  .topbar .icon-btn { width:38px; height:38px; }

  /* Tipografía de encabezados un poco menor */
  h1 { font-size:1.25rem !important; }

  /* Búsqueda interna no se desborda; filtros pueden envolver */
  .content .topbar__search { min-width:0 !important; width:100%; }
  .filter-btn { font-size:.8rem; padding:.45rem .65rem; }

  /* TODO grid se apila en una columna; los stats van en 2 columnas */
  .content .grid { grid-template-columns: 1fr !important; gap: .9rem !important; }
  .content .grid.stats { grid-template-columns: repeat(2, 1fr) !important; }

  /* Stat cards más compactas */
  .stat { gap:.7rem; }
  .stat__icon { width:42px; height:42px; }
  .stat__val { font-size:1.4rem; }
  .stat__label { font-size:.7rem; }

  /* Botones más táctiles y a ancho completo dentro de barras de acción */
  .btn { padding:.7rem 1rem; font-size:.92rem; }
  .action-bar { flex-direction:column; align-items:stretch !important; }
  .action-bar .btn { width:100%; justify-content:center; }

  /* ---- Tablas como tarjetas apiladas ---- */
  table.resp { min-width: 0 !important; }
  table.resp thead { display:none; }
  table.resp, table.resp tbody, table.resp tr, table.resp td { display:block; width:100%; }
  table.resp tr {
    border:1px solid var(--line); border-radius:14px;
    margin:0 0 1rem; padding:.5rem .3rem; background:#fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  table.resp tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
  }
  table.resp tbody tr:hover { background:#fff; }
  table.resp td {
    border:0 !important; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:.55rem .9rem; text-align:right; font-size:.92rem;
  }
  table.resp td::before {
    content: attr(data-label); font-weight:600; color:var(--ink-soft);
    text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em;
    flex-shrink:0;
  }
  table.resp td[data-label=""]::before { content:""; }
  table.resp td:last-child { justify-content:flex-end; padding-top:.7rem; }
  table.resp td .btn { width:100%; justify-content:center; }
}

@media (max-width: 1024px) and (min-width: 761px) {
  .content .grid.stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- Login ---- */
.auth { min-height:100vh; display:grid; grid-template-columns: 1.05fr 1fr; }
.auth__aside {
  position:relative; overflow:hidden; color:#fff;
  background: radial-gradient(120% 120% at 0% 0%, #1f9d57 0%, #0b5530 65%);
  padding: 3rem; display:flex; flex-direction:column; justify-content:space-between;
}
.auth__blob { position:absolute; border-radius:50%; filter: blur(70px); opacity:.45; }
.auth__form-wrap { display:grid; place-items:center; padding:2rem; background: var(--surface); }
@media (max-width: 820px){
  .auth {
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background: radial-gradient(130% 130% at 50% 0%, #f4fbf7 0%, #e8f5ed 100%) !important;
    min-height:100vh;
    padding: 1.5rem 1rem;
  }
  .auth__aside { display:none !important; }
  .auth__form-wrap {
    width:100% !important;
    min-height:auto !important;
    background: transparent !important;
    padding:0 !important;
    display:flex !important;
    justify-content:center;
  }
  .auth__card {
    background: #ffffff !important;
    border: 1px solid rgba(16, 185, 129, 0.12) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 25px -5px rgba(16, 138, 76, 0.05), 0 8px 10px -6px rgba(16, 138, 76, 0.05) !important;
    padding: 2.2rem 1.6rem !important;
  }
  .mobile-logo-wrap { display: block !important; }
  .mobile-footer { display: block !important; }
}

/* ---- Detalle helpers ---- */
.kv { display:flex; flex-direction:column; gap:.2rem; }
.kv__k { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-mute); font-weight:700; }
.kv__v { font-size:.95rem; font-weight:600; }
.doc-frame { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg); }
.doc-frame img { width:100%; display:block; }
.section-head { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1rem; margin-bottom:1.1rem; }
.section-head svg { color:var(--brand-600); width:20px; height:20px; }

/* ===== DataTables theming (Caseco) ===== */
.dataTables_wrapper { font-size:.9rem; }
.dataTables_filter input, .dataTables_length select {
  border:1px solid var(--line); border-radius:9px; padding:.4rem .7rem; outline:none; background:#fff;
}
.dataTables_filter input:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(31,157,87,.15); }
.dataTables_filter, .dataTables_length { margin-bottom:.6rem; }
.dataTables_info { color:var(--ink-soft); padding-top:.8rem !important; }
.dataTables_paginate { padding-top:.6rem; }
.dataTables_paginate .paginate_button {
  border:1px solid var(--line) !important; border-radius:8px !important; margin:0 2px; padding:.35rem .7rem !important;
  background:#fff !important; color:var(--ink-soft) !important;
}
.dataTables_paginate .paginate_button.current {
  background:var(--brand-600) !important; color:#fff !important; border-color:var(--brand-600) !important;
}

/* Fix radio buttons and checkboxes in forms */
input[type="radio"], input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  accent-color: var(--brand-600) !important;
  cursor: pointer !important;
  margin: 0 .4rem 0 0 !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background: transparent !important;
  border: initial !important;
  box-shadow: none !important;
}

.radio-option {
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  font-size: .92rem !important;
  padding: .35rem .5rem !important;
  border-radius: 8px !important;
  transition: background .15s ease !important;
  color: var(--ink) !important;
}
.radio-option:hover {
  background: var(--brand-50) !important;
}
.dataTables_paginate .paginate_button:hover {
  background:var(--bg) !important; color:var(--ink) !important; border-color:var(--line) !important;
}
table.dataTable { border-collapse:collapse !important; }
table.dataTable thead th { border-bottom:1px solid var(--line); }

/* ===== Compatibilidad: markup Bootstrap viejo adopta la estética nueva ===== */
.form-control {
  width:100%; padding:.7rem .85rem; border:1px solid var(--line); border-radius:10px;
  font-size:.92rem; outline:none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; background:#fff; color:var(--ink); font-family:inherit; margin-bottom:.2rem;
}
.form-control:hover:not(:disabled):not([readonly]) { border-color: var(--ink-mute); }
.form-control:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(31,157,87,.15); }
.form-control[readonly], .form-control:disabled { background:var(--bg); color:var(--ink-soft); }
select.form-control { appearance:auto; }
.form-label { font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:.3rem; display:inline-block; }
.btn-success, .btn-xs {
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-weight:600; font-size:.9rem;
  padding:.6rem 1rem; border-radius:10px; border:1px solid transparent; text-decoration:none;
  background:var(--brand-600) !important; color:#fff !important; box-shadow:0 6px 14px rgba(22,138,76,.25);
}
.btn-success:hover { background:var(--brand-700) !important; }
.btn-danger { background:#fff !important; border:1px solid #fca5a5 !important; color:var(--danger) !important; border-radius:10px; padding:.6rem 1rem; font-weight:600; }
fieldset { border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin-bottom:1rem; background:#fff; }
legend { font-weight:700; font-size:.9rem; width:auto; padding:0 .4rem; color:var(--brand-700); }
.panel, .panel-default { border:0 !important; }
.panel-heading h1 { font-size:1.4rem; font-weight:800; }
.signature-pad { border:1px dashed var(--line); border-radius:12px; background:var(--bg); max-width:100%; }
.responsive-iframe { border:1px solid var(--line); border-radius:12px; }

/* ===== Toggle de idioma ES/EN (minimalista) ===== */
.lang-toggle { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:#fff; }
.lang-toggle a { padding:.32rem .6rem; font-size:.74rem; font-weight:700; color:var(--ink-soft); text-decoration:none; line-height:1; letter-spacing:.02em; transition:.15s; }
.lang-toggle a.is-on { background:var(--brand-600); color:#fff; }
.lang-toggle a:not(.is-on):hover { background:var(--bg); color:var(--ink); }

/* ===== Fix: botones dentro del nav de la landing conservan su color ===== */
.lp-links a.btn { color:#fff; }
.lp-links a.btn--primary, .lp-links a.btn--primary i { color:#fff !important; }
.lp-links a.btn--white { color:var(--brand-700) !important; }

/* ===== Footer del sidebar: perfil visible + botón de cerrar sesión claro ===== */
.sidebar__foot .nav { flex: none; }
.sidebar__foot .nav a { color:var(--ink); }
.sidebar__foot .nav a svg { color:var(--brand-600); }
.btn-logout {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; margin-top:.4rem; padding:.6rem .8rem; border-radius:10px;
  border:1px solid #fca5a5; background:#fff; color:var(--danger);
  font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none;
}
.btn-logout:hover { background:#fef2f2; }
.btn-logout svg { width:17px; height:17px; color:var(--danger) !important; }