/* public/assets/css/app.css */
/* ---------- Base ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');

:root{
  --text:#222222;
  --bg:#f7f7f7;
  --card:#ffffff;
  --muted:#eeeeee;
  --border:#e5e5e5;
  --primary:#606060;
  --primary-contrast:#ffffff;
  --link:#3a3a3a;
  --success:#1f8f53;
  --warning:#b07d17;
  --danger:#b13a3a;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;

  --shadow:0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.05);
  --focus:0 0 0 3px rgba(0,0,0,.08);
}

html[data-theme="dark"]{
  --text:#e7e7e7;
  --bg:#0f1115;
  --card:#171a21;
  --muted:#1c212b;
  --border:#2a2f3a;
  --link:#d1d5db;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35);
  --focus:0 0 0 3px rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--text); background:var(--bg);
  font:400 14px/1.5 Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }
button, input, textarea, select{ font:inherit; color:inherit; }
:focus{ outline:none; box-shadow:var(--focus); }
::placeholder{ color:#9a9a9a; }

/* Fix modo dark: placeholder e inputs */
html[data-theme="dark"] ::placeholder{ color:#9aa4b2; opacity:.9; }
html[data-theme="dark"] .input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .textarea{
  background:#10141b;
  border-color:#2a2f3a;
  color:#e7e7e7;
}

/* ---------- Layout ---------- */
.wrapper{ min-height:100dvh; display:grid; grid-template-columns: 240px 1fr; }
.sidebar{
  background:var(--card); border-right:1px solid var(--border); padding:16px 12px; position:sticky; top:0; height:100dvh; overflow:auto;
}

/* Brand (avatar circular) */
.brand{ display:flex; align-items:center; gap:10px; padding:6px 8px; margin-bottom:12px; min-width:0; }
.brand .logo{ height:28px; width:auto; border-radius:6px; }
.brand .title{ font-weight:400; letter-spacing:.2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  background:var(--primary); color:var(--primary-contrast); font-size:12px; line-height:1; user-select:none;
}

/* Topbar */
.topbar{
  grid-column: 1 / -1; display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:10;
}
.topbar .brand{ margin:0; padding:0; }
.topbar__actions{ display:flex; align-items:center; gap:8px; }
.topbar__menu{ display:none; }

.topbar.elevated{ box-shadow:0 2px 10px rgba(0,0,0,.06); }
.topbar .btn:hover{ background:#f4f4f4; }
html[data-theme="dark"] .topbar .btn:hover{ background:#1a1f29; }
@media (max-width:420px){ .topbar .badge.role{ display:none; } }

@media (max-width: 720px){
  .wrapper{ grid-template-columns:1fr; }
  .sidebar{ position:relative; height:auto; }
  .topbar__menu{ display:inline-flex; }
}

/* Nav */
.nav{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.nav a{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
  padding:8px 10px; border-radius:8px; border:1px solid transparent;
}
.nav a:hover{ background:rgba(0,0,0,.035); border-color:var(--border); text-decoration:none; }
html[data-theme="dark"] .nav a:hover{ background:rgba(255,255,255,.05); }
.nav a.is-active{ background:rgba(0,0,0,.06); font-weight:500; outline:1px solid rgba(0,0,0,.06); }
html[data-theme="dark"] .nav a.is-active{ background:rgba(255,255,255,.08); outline:1px solid rgba(255,255,255,.08); }
.nav a i[data-lucide]{ width:18px; height:18px; display:inline-flex; align-items:center; }
.nav a svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.75; }
.nav a.is-active svg{ color:var(--primary); }
.nav__section{ margin:18px 6px 6px; font-size:12px; color:#666; }
html[data-theme="dark"] .nav__section{ color:#9aa4b2; }

.content{ padding:18px; }

.container{ max-width:1200px; margin:0 auto; }
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px;
}
.card + .card{ margin-top:16px; }
.card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.card-title{ font-weight:400; margin:0; }

/* Grids util */
.grid{ display:grid; gap:16px; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width: 1024px){ .grid-4{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 720px){ .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; } }

/* Forms base */
.form{ display:grid; gap:12px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:720px){ .row{ grid-template-columns:1fr; } }

.label{ font-size:12px; color:#555; margin-bottom:6px; }
html[data-theme="dark"] .label{ color:#a6adbb; }
.input, .select, .textarea{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text);
}
.textarea{ min-height:110px; resize:vertical; }

/* Botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card); color:var(--text); border:1px solid #cfcfcf;
  padding:10px 14px; border-radius:10px; cursor:pointer; transition:transform .02s ease-in;
  height:36px;
}
.btn.sm{ padding:6px 10px; border-radius:8px; font-size:13px; height:32px; }
html[data-theme="dark"] .btn{ border-color:var(--border); background:var(--card); }
.btn:hover{ text-decoration:none; background:#f7f7f7; }
html[data-theme="dark"] .btn:hover{ background:#1b202a; }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--primary); color:var(--primary-contrast); border-color:var(--primary); }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.block{ display:flex; width:100%; }

/* Switch claro/oscuro */
.switch{ position:relative; display:inline-flex; align-items:center; }
.switch input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.switch .track{
  width:54px; height:28px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); display:flex; align-items:center; justify-content:space-between;
  padding:0 6px; position:relative;
}
.switch .track i[data-lucide]{ width:14px; height:14px; opacity:.8; }
.switch .thumb{
  position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:999px;
  background:var(--primary); transition:transform .18s ease;
}
.switch input:checked + .track .thumb{ transform:translateX(26px); }
html[data-theme="dark"] .switch .track{ background:#11161e; }

/* Badges */
.badge{
  display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px;
  border:1px solid var(--border); background:var(--card); height:24px; line-height:18px;
}
.badge.success{ color:var(--success); border-color: rgba(31,143,83,.25); background: rgba(31,143,83,.06); }
.badge.warning{ color:var(--warning); border-color: rgba(176,125,23,.25); background: rgba(176,125,23,.08); }
.badge.danger{ color:var(--danger); border-color: rgba(177,58,58,.25); background: rgba(177,58,58,.08); }
.badge--accent{ background:var(--primary); color:var(--primary-contrast); border-color:var(--primary); }
.badge--no-border{ border:none; }
.badge.role{ text-transform:lowercase; }

/* Tabla clásica (genérica) */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
.table thead th{ background:#fafafa; font-weight:400; font-size:13px; color:#555; }
html[data-theme="dark"] .table thead th{ background:#11161e; color:#cdd3dc; }
.table tr:hover td{ background:#fcfcfc; }
html[data-theme="dark"] .table tr:hover td{ background:#151a22; }

/* Paginación */
.pager{ display:flex; align-items:center; gap:8px; }
.pager .page{ padding:8px 10px; border:1px solid var(--border); background:var(--card); border-radius:8px; }
.pager .page.is-active{ background:#f0f0f0; }
html[data-theme="dark"] .pager .page.is-active{ background:#1b202a; }

/* Tabs */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--border); }
.tab{ padding:10px 12px; border:1px solid transparent; border-top-left-radius:10px; border-top-right-radius:10px; }
.tab.is-active{ background:var(--card); border-color:var(--border); border-bottom-color:var(--card); }

/* Breadcrumbs */
.breadcrumbs{ display:flex; align-items:center; gap:8px; font-size:13px; color:#666; }
html[data-theme="dark"] .breadcrumbs{ color:#a6adbb; }

/* Alertas */
.alert{ border:1px solid var(--border); border-radius:10px; padding:12px 14px; background:var(--card); }
.alert.success{ border-color: rgba(31,143,83,.25); background: rgba(31,143,83,.06); }
.alert.warning{ border-color: rgba(176,125,23,.25); background: rgba(176,125,23,.08); }
.alert.danger{ border-color: rgba(177,58,58,.25); background: rgba(177,58,58,.08); }

/* Modal */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.modal .box{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); width:min(640px, 100%); padding:16px; box-shadow:var(--shadow); }

/* Explorer archivos */
.explorer{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:10px; }
.explorer-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.explorer-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
@media (max-width:1200px){ .explorer-grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:900px){ .explorer-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .explorer-grid{ grid-template-columns:repeat(2,1fr);} }

.file{ border:1px solid var(--border); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--card); }
.file .ico{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fafafa; font-size:12px; color:#555; }
html[data-theme="dark"] .file .ico{ background:#11161e; color:#cdd3dc; }
.file .name{ font-size:13px; word-break:break-word; }
.file .meta{ font-size:12px; color:#777; }
html[data-theme="dark"] .file .meta{ color:#9aa4b2; }

/* Estados de pago */
.status-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--card); font-size:12px; }
.status-badge.pendiente{ color:var(--warning); border-color: rgba(176,125,23,.25); }
.status-badge.pagado{ color:var(--success); border-color: rgba(31,143,83,.25); }
.status-badge.vencido{ color:var(--danger); border-color: rgba(177,58,58,.25); }

/* Login */
.login-box{ max-width:380px; margin:10vh auto; padding:18px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }

/* Utils */
.shadow{ box-shadow:var(--shadow); }
.round{ border-radius:var(--radius); }
.round-sm{ border-radius:var(--radius-sm); }
.round-lg{ border-radius:var(--radius-lg); }
.border{ border:1px solid var(--border); }

.mt-0{ margin-top:0!important; } .mt-6{ margin-top:6px!important; } .mt-12{ margin-top:12px!important; } .mt-18{ margin-top:18px!important; } .mt-24{ margin-top:24px!important; }
.mb-0{ margin-bottom:0!important; } .mb-6{ margin-bottom:6px!important; } .mb-12{ margin-bottom:12px!important; } .mb-18{ margin-bottom:18px!important; } .mb-24{ margin-bottom:24px!important; }
.p-0{ padding:0!important; } .p-6{ padding:6px!important; } .p-12{ padding:12px!important; } .p-16{ padding:16px!important; } .p-24{ padding:24px!important; }

.spinner{ width:18px; height:18px; border-radius:50%; border:2px solid #ddd; border-top-color:#888; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }

.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tooltip{ position:relative; }
.tooltip:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#111; color:#fff; padding:6px 8px; border-radius:6px; font-size:12px; white-space:nowrap; z-index:9;
}
.tooltip:hover::before{
  content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#111;
}

.has-accent{ color:var(--primary); }
.bg-accent{ background:var(--primary); color:var(--primary-contrast); }
.border-accent{ border-color:var(--primary)!important; }

/* ---------- Projects (genérico) ---------- */
.projects .breadcrumbs{ margin-bottom:12px; }
.projects .card .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.projects .table-wrap{ width:100%; overflow:auto; }
.projects .muted{ color:#777; font-size:12px; }
html[data-theme="dark"] .projects .muted{ color:#9aa4b2; }
.projects .estado-text{ text-transform:capitalize; }

/* actualizado: agrega columna para acciones y mantiene responsive */
.projects-index .filters{
  display:grid;
  grid-template-columns: 1fr 180px 140px 120px auto;
  gap:10px; align-items:end;
  margin-bottom:12px;
}
@media (max-width:900px){ .projects-index .filters{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .projects-index .filters{ grid-template-columns:1fr; } }
.projects-index .filters .label{ margin-bottom:6px; }
.projects-index .filters .input, .projects-index .filters .select{ height:38px; }
/* acciones en línea */
.projects-index .filters .filters-actions{
  display:flex; gap:8px; justify-content:flex-end; align-items:center; white-space:nowrap;
}
.projects-index .filters .filters-actions .btn{ height:38px; }

.projects-index .table thead th a{ color:#555; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
html[data-theme="dark"] .projects-index .table thead th a{ color:#cdd3dc; }
.projects-index .table thead th a:hover{ text-decoration:underline; }
.projects-index .table td .link{ text-decoration:none; }
.projects-index .table td .link:hover{ text-decoration:underline; }
.projects-index .pagination{ display:flex; gap:8px; justify-content:center; align-items:center; margin-top:12px; }
.projects-index .pagination .btn[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

.projects-show .header-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
@media (max-width:640px){ .projects-show .header-row{ flex-direction:column; align-items:flex-start; } }
.projects-show .meta-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:640px){ .projects-show .meta-grid{ grid-template-columns:1fr; } }
.projects-show .label{ margin-bottom:4px; }
.projects-show .kv{ display:flex; flex-direction:column; gap:4px; }
.projects-show .table-meta{ width:100%; border-collapse:separate; border-spacing:0; margin-top:8px; }
.projects-show .table-meta th, .projects-show .table-meta td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
.projects-show .table-meta th{ width:180px; color:#555; background:#fafafa; }
html[data-theme="dark"] .projects-show .table-meta th{ background:#11161e; color:#cdd3dc; }
.projects-show .hitos{ margin-top:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--card); padding:12px; overflow:auto; }
.projects-show .hitos pre, .projects-show .hitos code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px; line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.projects-show .hitos .label{ margin-bottom:8px; }
.projects-show .btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

.app-footer{ text-align:center; color:#666; font-size:12px; margin:24px auto; }
html[data-theme="dark"] .app-footer{ color:#9aa4b2; }

/* ---------- Tickets: NUEVO (limpio, sin estilos antiguos) ---------- */
.tickets-index .header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tickets-index .header-row .kpis{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:12px}
.chip--ghost{background:transparent}

/* Filtros lineales */
.filters-bar{
  display:grid;
  grid-template-columns: 1.6fr 180px 180px 1.2fr auto;
  gap:10px; align-items:center;
}
@media (max-width:1024px){ .filters-bar{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .filters-bar{ grid-template-columns:1fr; } }
.filters-bar .field{ position:relative; }
.filters-bar .field i[data-lucide]{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:.75; pointer-events:none;
}
.filters-bar input,
.filters-bar select{
  appearance:none; -webkit-appearance:none;
  width:100%; height:38px; border-radius:10px;
  background:var(--card); color:var(--text);
  border:1px solid var(--border);
  padding:0 12px; outline:none; line-height:1.35;
}

.filters-bar input:focus,
.filters-bar select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,0,0,.05);
}
html[data-theme="dark"] .filters-bar input,
html[data-theme="dark"] .filters-bar select{
  background:#10141b; border-color:#2a2f3a; color:#e7e7e7;
}
html[data-theme="dark"] .filters-bar input:focus,
html[data-theme="dark"] .filters-bar select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
.filters-actions{ display:flex; gap:8px; justify-content:flex-end; }
@media (max-width:640px){ .filters-actions{ justify-content:flex-start; } }

/* Flecha visible en select (light/dark) */
.select,
.filters-bar select{
  appearance:none; -webkit-appearance:none;
  background:
    linear-gradient(transparent,transparent) no-repeat,
    linear-gradient(transparent,transparent) no-repeat,
    var(--card);
  background-image:
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: calc(100% - 10px) 50%;
  background-size:14px;
  padding-right:36px;
}
html[data-theme="dark"] .select,
html[data-theme="dark"] .filters-bar select{
  background-color:#10141b; color:#e7e7e7;
}

/* Tabla (grid) */
.table-grid{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
}
.table-grid .row{
  display:grid;
  grid-template-columns: 84px 1.6fr 1fr 1fr 1fr 1fr 1fr;
  gap:8px; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--border);
}
.table-grid .row:last-child{ border-bottom:none; }
.table-grid .row.header{
  font-size:12px; opacity:.9; font-weight:400;
  background:rgba(0,0,0,.03);
}
html[data-theme="dark"] .table-grid .row.header{ background:rgba(255,255,255,.04); }
.table-grid .row.header.sticky{ position:sticky; top:0; z-index:1; }
.table-grid .cell{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-grid .cell.right{ text-align:right; }
.table-grid .cell.id a{ color:var(--link); text-decoration:none; }
.table-grid .row:not(.header):hover{ background:rgba(0,0,0,.02); }
html[data-theme="dark"] .table-grid .row:not(.header):hover{ background:rgba(255,255,255,.03); }

/* Estado / prioridad */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 8px; border-radius:999px;
  border:1px solid var(--border); background:var(--card); font-size:12px;
}
.dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.dot.abierto,.dot.open{ background:#1f8f53; }
.dot["en progreso"], .dot.inprogress{ background:#b07d17; }
.dot.hold{ background:#777; }
.dot.cerrado,.dot.closed{ background:#b13a3a; }
.nowrap{ white-space:nowrap; }

/* Empty state */
.empty-state{ display:flex; flex-direction:column; align-items:center; padding:28px 12px; gap:8px; text-align:center; }
.empty-state i[data-lucide]{ width:36px; height:36px; opacity:.35; }
.empty-state .title{ font-size:16px; }
.empty-state .desc{ font-size:13px; opacity:.8; }
.empty-state .cta{ margin-top:6px; }
html[data-theme="dark"] .chip{ background:transparent; }

/* Acciones de tabla en línea (ver/editar) */
.table td .actions{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.table td .actions .btn{ display:inline-flex; white-space:nowrap; }
.table-grid .cell.actions{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }
.table-grid .cell.actions .btn{ display:inline-flex; white-space:nowrap; }
.btn.sm{ white-space:nowrap; }
@media (max-width:420px){
  .table td .actions,
  .table-grid .cell.actions{ flex-wrap:wrap; }
}

/* Mejoras de contraste encabezados tabla */
.table thead th{ background:#f5f7fa; }
html[data-theme="dark"] .table thead th{ background:#141924; color:#cdd3dc; }