/* ======== Paleta base (usa las tuyas globales) ======== */
:root{
  --prussian: #0B1C2C;
  --atlantic: #123652;
  --deep-ink: #102032;
  --platinum: #E5E7EA;
  --silver: #C9CFD6;
  --teal: teal;
  --teal-lake: #2C9CA6;
  --paper: #FFFFFF;
  --mist: #F5F7FA;
  --shadow: 0 12px 34px rgba(16,32,50,0.12);
  --radius: 16px;
  --radius-lg: 22px;
}
button, input, textarea{
  font-family: inherit;
}
/* ======== General ======== */
h1,h2,h3{color:var(--prussian);margin:.5rem 0;}
section{margin:32px 0;}
.wrap{max-width:900px;margin:0 auto;}
.btn-group{display:flex;flex-wrap:wrap;gap:12px;}

/* ======== 1. BOTONES ======== */
.btn{
  font-family:inherit;font-weight:600;
  border:none;border-radius:999px;
  padding:10px 20px;cursor:pointer;
  font-size:0.95rem;transition:.2s ease all;
  text-decoration:none;display:inline-block;
}
.btn-primary{
  background:linear-gradient(90deg,var(--teal),var(--teal-lake));
  color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.btn-primary:hover{filter:brightness(1.1);}
.btn-ghost{
  background:transparent;border:1px solid var(--platinum);color:var(--atlantic);
}
.btn-ghost:hover{background:var(--paper);}
.btn-danger{
  background:linear-gradient(90deg,#ff5858,#d62828);
  color:#fff;box-shadow:0 6px 16px rgba(255,88,88,.25);
}
.btn-danger:hover{filter:brightness(1.05);}
.btn-link{
  background:none;color:var(--teal-lake);
  text-decoration:underline;text-underline-offset:2px;
}
.btn-link:hover{color:var(--teal);}

/* ======== 2. BOX PRINCIPAL ======== */
.local-box{
  background:var(--paper);
  border:1px solid var(--platinum);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow);
  margin: 20px 0;
}

/* ======== 3. BOX GHOST ======== */
.box-ghost{
  background:var(--mist);
  border:2px dashed var(--silver);
  color:var(--atlantic);
  box-shadow:none;
  margin: 20px 0;
}

/* ======== 4. TABLA ======== */
.table-wrap{overflow-x:auto;}
.tbl thead{
  background:linear-gradient(90deg,var(--atlantic),var(--teal-lake));
  color:#fff;
}
.tbl th,.tbl td{
  text-align:left;padding:12px 16px;
}
.tbl th:first-child{border-top-left-radius:var(--radius);}
.tbl th:last-child{border-top-right-radius:var(--radius);}
.tbl tbody tr:nth-child(even){background:var(--mist);}
.tbl tbody tr:hover{background:rgba(44,156,166,0.08);}

/* ======== 5. SNACKBAR ======== */
.snack{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;
  background:linear-gradient(135deg,
    color-mix(in oklab, var(--teal-lake), var(--teal) 25%),
    var(--atlantic)
  );
  color:#fff;
  padding:18px 24px;
  border-radius:var(--radius-lg);
  box-shadow:0 12px 28px rgba(16,32,50,.2);
}
.snack-content{display:flex;flex-direction:column;gap:4px;}
.snack strong{font-size:1.05rem;}
.snack .btn{background:#fff;color:var(--atlantic);font-weight:700;}
.snack .btn:hover{filter:brightness(0.9);}
.post{
  padding: 0 20px;
}

/* === HOLDER SCROLLEABLE PARA TABLAS === */
.table-holder{
  /* hereda tu paleta */
  --tbl-radius: var(--radius);
  position: relative;
  background: var(--paper);
  border: 1px solid var(--platinum);
  border-radius: var(--tbl-radius);
  box-shadow: var(--shadow);              /* <-- la sombra vive aquí */
  overflow: auto;                         /* scroll en ambos sentidos */
  max-width: 100%;
  max-height: fit-content;  /* ajusta si quieres más alto */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;                  /* override a tu global "none" */
  margin: 20px 0;
}

/* Opcional: pista visual de que hay más contenido a la derecha/abajo */
.table-holder::after,
.table-holder::before{
  content:"";
  position:absolute; pointer-events:none;
}

/* Si NO quieres las “pistas”, comenta los dos bloques de ::after/::before */

/* === TABLA SIN SOMBRA (la tenía antes) === */
.tbl{
  width: 100%;
  min-width: 640px;        /* fuerza scroll horizontal cuando sea necesario */
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;

  /* QUITA estos estilos si ya los tenías en .tbl */
  box-shadow: none !important;     /* <-- antes estaba en la tabla, ahora no */
  border: 0;                       /* el borde está en el holder */
  border-radius: 0;                /* el radio está en el holder */
  background: transparent;         /* el holder provee el “paper” */
}

/* Cabecera y celdas (siguen igual que tu versión previa) */
.tbl thead{
  background: linear-gradient(90deg,var(--atlantic),var(--teal-lake));
  color:#fff;
}
.tbl th, .tbl td{ text-align:left; padding:12px 16px; }

/* Quitamos radios en th porque el holder ya redondea */
.tbl th:first-child{ border-top-left-radius: 0; }
.tbl th:last-child { border-top-right-radius: 0; }

/* Zebra/hover si los usabas */
.tbl tbody tr:nth-child(even){ background: var(--mist); }
.tbl tbody tr:hover{ background: rgba(44,156,166,0.08); }

/* Scrollbar WebKit discreto (opcional) */
.table-holder::-webkit-scrollbar{ height:10px; width:10px; }
.table-holder::-webkit-scrollbar-thumb{
  background: rgba(16,32,50,.2); border-radius: 999px;
}
.table-holder::-webkit-scrollbar-track{ background: rgba(16,32,50,.05); }
.tbl thead th{ position: sticky; top: 0; z-index: 1; }
/* ========= CAMPOS DE FORMULARIO (commons) ========= */

/* Base */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--platinum);
  border-radius: 12px;
  background: var(--paper);
  color: var(--deep-ink);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.4;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-sizing: border-box;
}

/* Hover / focus */
input:hover,
textarea:hover,
select:hover {
  border-color: var(--silver);
  background: color-mix(in oklab, var(--paper), var(--mist) 40%);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--teal-lake);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal-lake), var(--paper) 70%);
}

/* Placeholder */
::placeholder {
  color: var(--silver);
  opacity: 1;
}

/* Estado error */
.ipt-err {
  border-color: #e65c5c !important;
  background: #fff6f6 !important;
}
.ipt-err:focus {
  box-shadow: 0 0 0 3px rgba(230,92,92,0.2);
}

/* Textarea específico */
textarea {
  min-height: 120px;
  resize: vertical;
}

/* Select */
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--teal-lake) 50%),
    linear-gradient(135deg, var(--teal-lake) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Disabled / read-only */
input[disabled],
textarea[disabled],
select[disabled],
input[readonly],
textarea[readonly],
select[readonly] {
  background: var(--mist);
  color: var(--silver);
  cursor: not-allowed;
  opacity: 0.8;
}

/* Agrupaciones básicas */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.form-col {
  flex: 1 1 220px;
  min-width: 180px;
}