/*
:root{ --bg:#ffffff;--text:#111;--muted:#444;--border:#e5e7eb;--accent:#111;--accent-2:#6b7280 }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
a{color:var(--text);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)}
.brand{font-weight:800;letter-spacing:.2px}
.nav a{margin-left:16px;opacity:.9}
.footer{margin-top:56px;padding:24px 0;border-top:1px solid var(--border);font-size:14px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{border:1px solid var(--border);border-radius:16px;padding:20px;transition:transform .1s ease, box-shadow .1s ease;background:#fff}
.card h3{margin:0 0 8px 0}.card p{margin:0 0 16px 0;color:var(--muted)}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.05)}
.btn{appearance:none;border:1px solid var(--text);background:var(--text);color:#fff;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.btn.secondary{background:#fff;color:var(--text)}
.section{margin:28px 0}.section h2{margin:0 0 8px 0;font-size:22px}
.helper{font-size:13px;color:var(--muted)}
.input, select, textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}
.label{font-weight:600;margin:8px 0;display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 12px;text-align:left;font-size:14px}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
hr{border:none;border-top:1px solid var(--border);margin:20px 0}
details{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}
summary{cursor:pointer;font-weight:600}
fieldset{border:1px solid var(--border);border-radius:12px;padding:12px;margin:8px 0}
legend{padding:0 6px;font-weight:700}
.inline{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:260px 1fr auto;gap:10px;align-items:center;margin-bottom:6px}
small.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;color:var(--accent-2)}
.toast{position:fixed;right:16px;bottom:16px;background:#111;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.2);opacity:0;transform:translateY(8px);transition:.2s}
.toast.show{opacity:1;transform:translateY(0)}
.spinner{width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;display:inline-block;vertical-align:-2px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{padding:16px;border:1px dashed var(--border);border-radius:12px;background:#fff;color:var(--muted)}
.icon-btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 8px;cursor:pointer}
.tb-wrap{overflow:auto}
.tb{width:100%; border-collapse:collapse; background:#fff}
.tb th,.tb td{border-bottom:1px solid #e2e8f0; padding:.55rem .6rem; text-align:left; vertical-align:top}
.tb thead th{background:#f8fafc; font-weight:600; color:#334155}
.tb tr.editing td{background:#f8fafc}
.tb input,.tb textarea{width:100%; border:1px solid #cbd5e1; border-radius:8px; padding:.35rem .5rem}
.btn{border:1px solid #cbd5e1; background:#fff; border-radius:10px; padding:.4rem .7rem; cursor:pointer}
.btn:hover{background:#f1f5f9}
.tb-actions{display:flex; gap:.35rem; flex-wrap:wrap}
.act{border:1px solid #cbd5e1; background:#fff; border-radius:8px; padding:.2rem .45rem; cursor:pointer}
.act:hover{background:#f1f5f9}*/

/* ======== Design tokens (ajusta hex si queréis afinar) ======== 
:root{
    --brand: #0f3d6e;          /* azul corporativo (cabecera/botones primarios) 
    --brand-600:#124a88;       /* hover oscuro 
    --accent:#f2b705;          /* acento cálido para detalles/CTAs secundarios 
    --ink:#0f172a;             /* texto principal 
    --muted:#64748b;           /* texto secundario
    --line:#e2e8f0;            /* bordes suaves 
    --bg:#ffffff;              /* fondo principal
    --bg-soft:#f8fafc;         /* paneles/thead /
    --ok:#16a34a;              /* confirmación 
    --warn:#f59e0b;            /* avisos *
    --err:#dc2626;             /* errores /
    --radius: 12px;
    --shadow: 0 8px 24px rgba(15, 61, 110, .08);
  }*/

  :root{
    /* Gris corporativo como color base (cabecera/botones) */
    --brand: #3f3f46;      /* zinc-700 */
    --brand-600:#27272a;   /* hover más oscuro */
  
    /* Amarillo GALI como acento/CTAs secundarios */
    --accent:#f2b705;
  
    /* Neutros */
    --ink:#0f172a;
    --muted:#64748b;
    --line:#e5e7eb;        /* gris claro */
    --bg:#ffffff;
    --bg-soft:#f8fafc;
  
    /* Estado */
    --ok:#16a34a;
    --warn:#f59e0b;
    --err:#dc2626;
  
    --radius: 12px;
    --shadow: 0 8px 24px rgba(63,63,70,.08);
  }
  
  /* ======== Reset suave ======== */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif}
  
  /* ======== Layout base ======== */
  .container{max-width:1100px;margin:0 auto;padding:24px}
  .header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--brand);color:#fff}
  .brand{font-weight:700;letter-spacing:.2px}
  .nav a{color:#fff;text-decoration:none;margin-left:16px;opacity:.95}
  .nav a:hover{opacity:1;text-decoration:underline}
  .footer{padding:24px;color:var(--muted);border-top:1px solid var(--line);margin-top:24px}
  
  /* ======== Tarjetas / paneles ======== */
  .section details{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:14px 0;overflow:hidden}
  .section summary{list-style:none;cursor:pointer;padding:14px 16px;background:linear-gradient(#fff, #fcfdff);border-bottom:1px solid var(--line);font-weight:600;color:#0d2849}
  .section summary::-webkit-details-marker{display:none}
  
  /* ======== Botones ======== */
  .btn{border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:10px;padding:.55rem .9rem;cursor:pointer;transition:.15s;box-shadow:0 2px 0 rgba(0,0,0,.05)}
  .btn:hover{background:var(--brand-600);border-color:var(--brand-600)}
  .btn.secondary{border:1px solid var(--line);background:#fff;color:var(--brand)}
  .btn.secondary:hover{background:var(--bg-soft)}
  .btn.ghost{border:1px dashed var(--line);background:transparent;color:var(--brand)}
  
  /* ======== Formularios ======== */
  input[type="text"],input[type="email"],input[type="tel"],input[type="number"],textarea,select{
    width:100%;border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;background:#fff;
  }
  label{font-weight:600;color:#0d2849}
  
  /* ======== Ficha en modo lista (detalle) ======== */
  .kv{ display:grid; grid-template-columns:220px 1fr auto; gap:8px 14px; align-items:start; padding:12px 16px }
  .kv-row{ display:contents; border-bottom:1px solid var(--line) }
  .k{ color:#0d2849; font-weight:600 }
  .v{ white-space:pre-wrap; color:var(--ink); min-height:24px }
  .actions{display:flex;gap:6px;align-items:center}
  .iconbtn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.25rem .5rem;cursor:pointer}
  .iconbtn:hover{background:var(--bg-soft)}
  .kv-row.editing .v{ display:none }
  .editor{ display:none; grid-column:2/4 }
  .kv-row.editing .editor{ display:flex; gap:.5rem; align-items:flex-start }
  .editor input,.editor textarea,.editor select{ min-width:260px }
  
  /* ======== Tabla (trabajadores) ======== */
  .tb-wrap{overflow:auto}
  .tb{width:100%;border-collapse:collapse;background:#fff}
  .tb thead th{background:var(--bg-soft);font-weight:700;color:#0d2849;border-bottom:1px solid var(--line)}
  .tb th,.tb td{border-bottom:1px solid var(--line);padding:.6rem .7rem;text-align:left;vertical-align:top}
  .tb tr.editing td{background:#fbfdff}
  .tb-actions{display:flex;gap:.35rem;flex-wrap:wrap}
  .act{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.2rem .45rem;cursor:pointer}
  .act:hover{background:var(--bg-soft)}
  
  /* ======== Toast ======== */
  .toast{position:fixed;right:16px;bottom:16px;background:#0f172a;color:#fff;padding:.6rem .8rem;border-radius:10px;opacity:.97;z-index:9999}
  
  /* ======== Chips / estados ======== */
  .pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:.18rem .6rem;margin-right:.35rem;background:#fff}
  .pill.brand{border-color:var(--brand);color:var(--brand);background:#fff3}
  .pill.warn{border-color:var(--warn);color:#78350f}
  .pill.ok{border-color:var(--ok);color:#065f46}
  
  /* ======== Utilidades ======== */
  .mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
  .mt-2{margin-top:12px}.mt-3{margin-top:18px}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  
  /* ======== Responsive ======== */
  @media (max-width: 860px){
    .container{padding:16px}
    .kv{grid-template-columns: 1fr}
    .actions{justify-content:flex-start}
    .nav a{margin-left:10px}
  }
  

  /* Más “aire” en la página */
.container{max-width:1100px;margin:0 auto;padding:32px}

/* Acordeones con relleno interior en su contenido */
.section details{margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;overflow:hidden}
.section summary{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;color:#0d2849;background:linear-gradient(#fff,#fcfdff)}
/* 👉 relleno a TODO lo que cuelga del details salvo el summary */
.section details > *:not(summary){padding:18px 20px}

/* Campos con borde redondeado coherente */
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],textarea,select{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:.65rem .8rem;background:#fff
}

/* Grid de dos columnas en formularios (si lo usas) */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width: 860px){ .grid-2{grid-template-columns:1fr} }

/* Oculta el marcador nativo para poder personalizarlo */
.section summary::-webkit-details-marker{display:none}

/* Caret “▶” dibujado con bordes, gira al abrir */
.section summary{
  position:relative;
  padding-left:44px; /* deja hueco para la flecha */
}
.section summary::before{
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%) rotate(-45deg);
  width:10px; height:10px;
  border-right:3px solid var(--brand);
  border-bottom:3px solid var(--brand);
  transition:transform .2s ease;
}
/* Cuando el details está abierto, gira la flecha hacia abajo */
.section details[open] > summary::before{
  transform:translateY(-50%) rotate(45deg);
}
.btn.secondary{
    border:1px solid var(--accent);
    color:#3a2f00;          /* legible sobre amarillo */
    background:var(--accent);
  }
  .btn.secondary:hover{ filter:brightness(.95) }
/* ===== ADMIN – Estructura y aire ===== */
.admin .container{
    max-width: 1160px;
    padding: 40px 32px;           /* más margen interior */
    margin: 0 auto;
  }
  
  .admin .page-title{
    font-size: 42px;
    line-height: 1.15;
    margin: 0 0 24px;
  }
  
  .admin .toolbar{
    display: flex;
    gap: 12px;
    margin: 12px 0 22px;          /* separación bajo buscador/botón */
  }
  
  .admin input[type="search"],
  .admin input[type="text"]{
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
  }
  
  /* Botón actualizar */
  .admin .btn{
    height: 46px;
    padding: 0 22px;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    border: 1px solid var(--brand-600);
    font-weight: 700;
  }
  .admin .btn:hover{ filter: brightness(.95); }
  
  /* ===== ADMIN – Tabla con más respiración ===== */
  .admin table{
    width: 100%;
    border-collapse: separate;  /* permite padding cómodo */
    border-spacing: 0;
  }
  
  .admin thead th{
    text-align: left;
    color: var(--muted);
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
  }
  
  .admin tbody td{
    padding: 18px;               /* << aire aquí */
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  
  .admin tbody tr:hover{
    background: var(--bg-soft);  /* resalte sutil al pasar */
  }
  
  .admin tbody tr:last-child td{
    border-bottom-color: transparent;
  }
  
  /* ===== ADMIN – Botón "Ver detalle" pill limpio ===== */
  .admin .btn-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid var(--ink);
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    font-weight: 600;
    transition: .15s ease;
  }
  
  .admin .btn-pill:hover{
    background: var(--accent);       /* acento GALI */
    border-color: var(--accent);
    color: #2b2100;                  /* legible sobre amarillo */
  }
  /* Contenedor ancho y centrado */
.gali-wrap{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}

/* —— Topbar —— */
.gali-topbar{background:var(--accent); color:#1a1a1a; font-weight:600}
.gali-topbar .gali-wrap{height:44px}
.gali-toplinks{display:flex;gap:28px}
.gali-toplinks a{color:#1a1a1a;text-decoration:none}
.gali-toplinks a:hover{text-decoration:underline}

.gali-social{display:flex;align-items:center;gap:18px}
.gali-social .ico{display:inline-flex;align-items:center;gap:8px;color:#1a1a1a;text-decoration:none}
.gali-social .ico.phone{font-weight:700}

/* —— Navbar —— */
.gali-navbar{background:var(--brand); color:#fff; position:sticky; top:0; z-index:50; box-shadow:0 4px 18px rgba(0,0,0,.12)}
.gali-navbar .gali-wrap{height:74px}

.gali-brand img{height:48px; display:block}

/* Menú desktop */
.gali-menu{display:flex;align-items:center;gap:36px}
.gali-menu a{color:#fff;text-decoration:none;font-weight:600}
.gali-menu a:hover,.gali-menu a.active{opacity:.9;text-decoration:underline}

/* Dropdown */
.gali-dropdown{position:relative}
.gali-dropdown .dd-btn{
  color:#fff;background:transparent;border:0;font-weight:600;display:flex;align-items:center;gap:8px;cursor:pointer
}
.gali-dropdown .caret{
  display:inline-block;width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-top:2px
}
.gali-dropdown .dd-menu{
  position:absolute;top:110%;left:0;min-width:220px;background:#ffffff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:8px;display:none
}
.gali-dropdown.open .dd-menu{display:block}
.gali-dropdown .dd-menu a{display:block;color:#0f172a;padding:10px 12px;border-radius:8px}
.gali-dropdown .dd-menu a:hover{background:#f8fafc}

/* Burger (mobile) */
.gali-burger{display:none;flex-direction:column;gap:5px;width:36px;height:28px;justify-content:center;background:transparent;border:0}
.gali-burger span{display:block;height:3px;background:#fff;border-radius:2px}

/* Responsive */
@media (max-width: 980px){
  .gali-burger{display:flex}
  .gali-menu{
    position:fixed; inset:74px 0 auto 0;
    background:var(--brand); padding:14px 20px 24px; display:none; flex-direction:column; gap:16px
  }
  .gali-navbar.open .gali-menu{display:flex}
  .gali-dropdown .dd-menu{position:static; display:none; background:rgba(255,255,255,.06); border:0; box-shadow:none; padding:6px 10px}
  .gali-dropdown.open .dd-menu{display:block}
}