/* Rodriguez Suarez LLC — Sistema de diseño compartido (panel interno + portal) */

:root{
  /* claro (igual a la landing) */
  --bg:#FFFFFF; --bg-2:#F7FAF7; --surface:#FFFFFF; --surface-2:#F7FAF7;
  --fg:#0F1F17; --fg-2:#3D5A4A; --fg-3:#6B8A77;
  --accent:#064E3B; --accent-2:#10B981;
  --warm:#D97706; --warm-2:#FBBF24; --warm-glow:rgba(217,119,6,.1);
  --wa:#25D366; --wa-hover:#20BD5A;
  --border:rgba(15,31,23,.10); --border-2:rgba(15,31,23,.16);
  --radius:12px; --radius-sm:8px;
  --danger:#DC2626; --danger-bg:rgba(220,38,38,.08);
  --success:var(--accent-2); --success-bg:rgba(16,185,129,.1);
  --warn:var(--warm); --warn-bg:rgba(217,119,6,.1);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1); --t:.2s;
  --shadow:0 1px 3px rgba(15,31,23,.06);
  --shadow-md:0 8px 24px rgba(15,31,23,.08);
  --hero-grad:linear-gradient(90deg,#064E3B 0%,#10B981 55%,#FBBF24 100%);
}

:root[data-theme="dark"]{
  --bg:#0a0f0c; --bg-2:#0f1613; --surface:#101714; --surface-2:#182420;
  --fg:#eef5f1; --fg-2:#9fb0a8; --fg-3:#647a71;
  --accent:#10B981; --accent-2:#34d399;
  --warm:#FBBF24; --warm-2:#D97706;
  --border:rgba(154,255,214,.09); --border-2:rgba(154,255,214,.16);
  --danger:#ff6b7d; --danger-bg:rgba(255,107,125,.12);
  --success:#34d399; --success-bg:rgba(52,211,153,.12);
  --warn:#FBBF24; --warn-bg:rgba(251,191,36,.12);
  --glow:rgba(16,185,129,.18);
  --shadow:0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 12px 32px rgba(0,0,0,.5);
}
:root:not([data-theme="dark"]){ --glow:rgba(16,185,129,.14); }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}
body{font-family:var(--font);color:var(--fg);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font:inherit;color:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}

/* Estilo base para cualquier input/select suelto (fuera de .field) para que nunca se vea con el estilo por defecto del navegador */
select,
input[type="text"],input[type="search"],input[type="email"],input[type="tel"],
input[type="number"],input[type="date"],input[type="time"],input[type="password"],
input[type="url"],textarea{
  padding:.55rem .75rem;border:1px solid var(--border-2);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--fg);font-size:.8125rem;
}
select:focus,input:focus,textarea:focus{outline:2px solid var(--accent-2);outline-offset:-1px}

.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}

/* ============ Header ============ */
/* .app-top envuelve header + nav de pestañas (si hay) para que ambos
   queden pegados juntos al hacer scroll, en vez de que la barra de
   pestañas se deslice por separado y "salte" debajo del header. */
.app-top{position:sticky;top:0;z-index:100;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(10px)}
.app-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.7rem 1.25rem;border-bottom:1px solid var(--border)}
.app-header::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--hero-grad);opacity:.9;box-shadow:0 0 12px var(--glow)}
.app-header .brand{display:flex;align-items:center;gap:.55rem}
.app-header .brand img.icon{width:32px;height:32px;object-fit:contain}
.app-header .brand img.wordmark{height:15px;width:auto;object-fit:contain;transition:filter var(--t) var(--ease)}
[data-theme="dark"] .app-header .brand img.wordmark,
[data-theme="dark"] .login-card .brand img.wordmark{filter:invert(1) brightness(1.35)}
.app-header-right{display:flex;align-items:center;gap:.75rem}
.app-header-user{font-size:.8rem;color:var(--fg-2);font-weight:500}
.theme-toggle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--fg-2);transition:all var(--t) var(--ease)}
.theme-toggle:hover{background:var(--surface-2);border-color:var(--border-2)}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}

/* ============ Notificaciones (badge) ============ */
.notif-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger);flex-shrink:0}
.notif-badge{display:inline-flex;align-items:center;gap:.3rem}

/* ============ Kanban: scroll y drag ============ */
.kanban{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}
.kanban::-webkit-scrollbar{height:8px}
.kanban::-webkit-scrollbar-track{background:transparent}
.kanban::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:4px}
.kanban::-webkit-scrollbar-thumb:hover{background:var(--fg-3)}
.kanban-card[draggable="true"]{cursor:grab}
.kanban-card.dragging{opacity:.4}
.kanban-col.drag-over{outline:2px dashed var(--accent-2);outline-offset:-2px}

/* ============ Bottom nav + sheet "Más" (solo mobile) ============ */
.bottom-nav{display:none}
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:250;display:none;align-items:flex-end;justify-content:center}
.sheet-overlay.active{display:flex}
.sheet{background:var(--surface);width:100%;max-width:520px;border-radius:16px 16px 0 0;padding:.75rem 1rem calc(1rem + env(safe-area-inset-bottom));box-shadow:var(--shadow-md);animation:sheet-up .2s var(--ease)}
.sheet-handle{width:36px;height:4px;background:var(--border-2);border-radius:99px;margin:0 auto .75rem}
.sheet-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.8rem .5rem;font-size:.9rem;font-weight:500;color:var(--fg);border-bottom:1px solid var(--border)}
.sheet-item:last-child{border-bottom:none}
.sheet-item svg{width:20px;height:20px;color:var(--fg-2);flex-shrink:0}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ============ Tabs ============ */
.tabs{display:flex;gap:0;background:var(--surface);border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{position:relative;padding:.8rem 1.1rem;font-size:.8125rem;font-weight:500;color:var(--fg-3);white-space:nowrap;transition:all var(--t) var(--ease)}
.tab-btn::after{content:'';position:absolute;left:.2rem;right:.2rem;bottom:-1px;height:2px;background:var(--hero-grad);transform:scaleX(0);transition:transform var(--t) var(--ease);border-radius:2px}
.tab-btn:hover{color:var(--fg-2)}
.tab-btn.active{color:var(--accent);font-weight:600}
.tab-btn.active::after{transform:scaleX(1);box-shadow:0 0 10px var(--glow)}
[data-theme="dark"] .tab-btn.active{color:var(--accent-2)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.8125rem;transition:all var(--t) var(--ease);white-space:nowrap;border:1px solid transparent}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 0 0 0 var(--glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px var(--glow)}
.btn-secondary{border-color:var(--border-2);color:var(--fg);background:var(--surface)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--accent-2)}
.btn-warm{background:linear-gradient(135deg,var(--warm),var(--warm-2));color:#fff}
.btn-warm:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(217,119,6,.25)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-hover);transform:translateY(-1px)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{opacity:.9}
.btn-ghost{color:var(--fg-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--fg)}
.btn-sm{padding:.4rem .7rem;font-size:.75rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ============ KPI cards ============ */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1.25rem}
.kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;overflow:hidden;transition:all var(--t) var(--ease)}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--hero-grad)}
.kpi:hover{border-color:var(--border-2);box-shadow:var(--shadow)}
.kpi-label{font-size:.65rem;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem}
.kpi-value{font-size:1.55rem;font-weight:700;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi-delta{font-size:.7rem;font-weight:600;margin-top:.3rem}
.kpi-delta.up{color:var(--success)}
.kpi-delta.down{color:var(--danger)}

/* ============ Cards / panels ============ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:border-color var(--t) var(--ease)}
.card + .card{margin-top:1rem}
.card-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:1rem;gap:1rem}
.card-header h2,.card-header h3{font-size:1rem;font-weight:600;letter-spacing:-.01em}

/* ============ Tables ============ */
.data-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.data-table th{text-align:left;font-size:.65rem;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:.05em;padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.data-table td{padding:.65rem .6rem;border-bottom:1px solid var(--border);color:var(--fg-2)}
.data-table tr:hover td{background:var(--surface-2)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table-wrap{overflow-x:auto}

/* ============ Pills / badges ============ */
.pill{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:99px;font-size:.7rem;font-weight:600;white-space:nowrap}

/* ============ Menú de acciones (kebab) ============ */
.action-menu-wrap{position:relative;display:inline-block}
.action-menu-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--fg-2)}
.action-menu-btn:hover{background:var(--surface-2);color:var(--fg)}
.action-menu{position:fixed;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);min-width:190px;z-index:1000;display:none;overflow:hidden}
/* En mobile, position:fixed calculado por JS se desalinea con el scroll
   de Safari — en su lugar, el menu cuelga directo del boton con position:absolute. */
@media(max-width:640px){
  .action-menu{position:absolute!important;top:calc(100% + 4px)!important;right:0!important;left:auto!important}
}
.action-menu.open{display:block}
.action-menu button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.6rem .85rem;font-size:.8125rem;color:var(--fg)}
.action-menu button:hover{background:var(--surface-2)}
.action-menu button.danger{color:var(--danger)}
.action-menu button svg{width:16px;height:16px;flex-shrink:0;opacity:.75}
.icon-btn-label{display:inline-flex;align-items:center;gap:.4rem}
.icon-btn-label svg{width:16px;height:16px;flex-shrink:0}
.pill-green{background:var(--success-bg);color:var(--success)}
.pill-amber{background:var(--warn-bg);color:var(--warm)}
.pill-red{background:var(--danger-bg);color:var(--danger)}
.pill-gray{background:var(--surface-2);color:var(--fg-3)}

/* ============ Forms ============ */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.field label{font-size:.75rem;font-weight:600;color:var(--fg-2)}
.field input,.field select,.field textarea{padding:.55rem .7rem;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--fg);font-size:.8125rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent-2);outline-offset:-1px}

.mini-input{padding:.4rem .6rem;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--fg);font-size:.8125rem}
.mini-input:focus{outline:2px solid var(--accent-2);outline-offset:-1px}
.installment-row{padding:.6rem;border-radius:var(--radius-sm)}
.installment-row.is-paid{background:var(--accent-bg,rgba(20,140,110,.06))}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

/* ============ Mobile ============ */
@media(max-width:640px){
  .app-header{padding:.6rem .85rem}
  .app-header .brand img.wordmark{display:none}
  .app-header-user{display:none}
  .app-header-right{gap:.5rem}
  .container{padding:0 .85rem}
  .card{padding:1rem}
  .modal-box{padding:1.1rem;max-height:90vh}
  .kpi-value{font-size:1.3rem}
  .tab-btn{padding:.75rem .85rem;font-size:.75rem}

  /* Tablas -> tarjetas apiladas, nada de scroll lateral apretado */
  .data-table-wrap{overflow-x:visible}
  .data-table{display:block;width:100%}
  .data-table thead{display:none}
  .data-table tbody{display:block}
  .data-table tr{display:block;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.65rem .85rem;margin-bottom:.6rem;background:var(--surface)}
  .data-table tr:hover td{background:none}
  .data-table td{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.4rem 0;border-bottom:1px solid var(--border);text-align:right}
  .data-table td:last-child{border-bottom:none}
  .data-table td[data-label]::before{content:attr(data-label);font-size:.65rem;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:.05em;text-align:left;flex-shrink:0}
  .data-table td:not([data-label]){justify-content:flex-end}
  .data-table td .action-menu-wrap{margin-left:auto}

  /* Barra inferior reemplaza las pestañas de arriba */
  .tabs{display:none}
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;background:color-mix(in srgb, var(--bg) 94%, transparent);backdrop-filter:blur(10px);border-top:1px solid var(--border);padding:.4rem .2rem calc(.4rem + env(safe-area-inset-bottom))}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.3rem 0;color:var(--fg-3);font-size:.62rem;font-weight:600}
  .bn-item svg{width:21px;height:21px}
  .bn-item.active{color:var(--accent)}
  [data-theme="dark"] .bn-item.active{color:var(--accent-2)}
  .container{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
}

/* ============ Kanban ============ */
.kanban{display:flex;gap:.65rem;overflow-x:auto;padding-bottom:1rem}
.kanban-col{flex:0 0 210px;background:var(--surface-2);border-radius:var(--radius);padding:.6rem;display:flex;flex-direction:column;gap:.5rem;max-height:calc(100vh - 220px);overflow-y:auto}
.kanban-col-header{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;font-weight:700;color:var(--fg-2);padding:0 .25rem}
.kanban-count{background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:.1rem .5rem;font-size:.65rem}
.kanban-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem .8rem;cursor:pointer;transition:all var(--t) var(--ease)}
.kanban-card:hover{border-color:var(--accent-2);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.kanban-card-name{font-size:.8125rem;font-weight:600;margin-bottom:.35rem;letter-spacing:-.005em}
.kanban-card-meta{font-size:.7rem;color:var(--fg-3);display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}

/* ============ Modal ============ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:1rem}
.modal-overlay.active{display:flex}
.modal-box{background:var(--surface);border-radius:var(--radius);padding:1.5rem;max-width:480px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-md)}

/* ============ Toast ============ */
.toast{position:fixed;bottom:1.25rem;right:1.25rem;background:var(--fg);color:var(--bg);padding:.75rem 1.1rem;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:500;z-index:300;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);transition:all .25s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{background:var(--danger)}
.toast.success{background:var(--success)}

/* ============ Utility ============ */
.flex{display:flex;flex-wrap:wrap}
.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-sm{gap:.5rem}
.gap-md{gap:1rem}
.text-muted{color:var(--fg-3)}
.text-sm{font-size:.8125rem}
.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}
.hidden{display:none!important}

/* ============ Login screen ============ */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 0%,color-mix(in srgb, var(--accent-2) 8%, var(--bg-2)),var(--bg-2) 60%);padding:1.5rem}
.login-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:calc(var(--radius) + 4px);padding:2.75rem 2.25rem;max-width:380px;width:100%;box-shadow:var(--shadow-md);overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--hero-grad);box-shadow:0 0 16px var(--glow)}
.login-card .brand{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin-bottom:2rem}
.login-card .brand img.icon{width:48px;height:48px}
.login-card .brand img.wordmark{height:18px}
.login-card h1,.login-card .brand span{font-size:.95rem;font-weight:600;letter-spacing:.08em}
.login-error{background:var(--danger-bg);color:var(--danger);font-size:.8125rem;padding:.6rem .8rem;border-radius:var(--radius-sm);margin-bottom:1rem;display:none}
.login-error.active{display:block}