/* ══════════════════════════════════════════════════════════════
   Portal ATT — Estilos con identidad visual Clevercel
   Paleta: Negro #1A1A1A · Amarillo #FFE500 · Blanco #FFFFFF
   ══════════════════════════════════════════════════════════════ */
:root {
  --black:       #1A1A1A;
  --black-soft:  #2C2C2C;
  --yellow:      #FFE500;
  --yellow-dark: #D4BE00;
  --yellow-pale: #FFFDE7;
  --white:       #FFFFFF;
  --bg:          #F5F5F5;
  --card:        #FFFFFF;
  --border:      #E0E0E0;
  --text:        #1A1A1A;
  --muted:       #757575;

  /* Semánticos */
  --ok:          #1B5E20;
  --ok-bg:       #E8F5E9;
  --ok-border:   #A5D6A7;
  --err:         #B71C1C;
  --err-bg:      #FFEBEE;
  --err-border:  #EF9A9A;
  --warn-col:    #E65100;
  --warn-bg:     #FFF3E0;
  --warn-border: #FFCC80;
  --info-col:    #0D47A1;
  --info-bg:     #E3F2FD;
  --info-border: #90CAF9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar {
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar .brand img {
  height: 30px;
}

.topbar .brand-divider {
  width: 1px;
  height: 24px;
  background: rgba(255,255,255,.2);
}

.topbar .brand-text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .3px;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar .user {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  margin-right: 4px;
}

.btn-link {
  font-size: 13px;
  color: var(--yellow);
  text-decoration: none;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  transition: background .15s;
}
.btn-link:hover { background: rgba(255,229,0,.12); }

/* ── Contenedor principal ────────────────────────────────────────── */
.container {
  max-width: 980px;
  margin: 2rem auto;
  padding: 0 1.25rem;
}

/* ── Tarjeta ─────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.75rem 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.card-narrow { max-width: 400px; margin: 3rem auto; }

h1 {
  margin: 0 0 1.25rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--black);
  padding-bottom: .75rem;
  border-bottom: 3px solid var(--yellow);
  display: inline-block;
}

h2 {
  font-size: 1.1rem;
  margin: 2rem 0 .6rem;
  color: var(--black);
}

.muted { color: var(--muted); font-size: .9rem; }

/* ── Formularios ─────────────────────────────────────────────────── */
label {
  display: block;
  margin: 1rem 0 .35rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--black);
}

input[type=text],
input[type=password],
input[type=file] {
  width: 100%;
  padding: .6rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 1rem;
  color: var(--text);
  background: var(--white);
  transition: border-color .15s, box-shadow .15s;
}

input[type=text]:focus,
input[type=password]:focus {
  outline: none;
  border-color: var(--yellow-dark);
  box-shadow: 0 0 0 3px rgba(255,229,0,.25);
}

/* ── Botones ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.25rem;
  padding: .6rem 1.3rem;
  border: none;
  border-radius: 7px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s, transform .1s;
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }

/* Primario: amarillo con texto negro — máximo contraste */
.btn-primary {
  background: var(--yellow);
  color: var(--black);
  box-shadow: 0 2px 6px rgba(255,229,0,.35);
}
.btn-primary:hover {
  background: var(--yellow-dark);
  box-shadow: 0 4px 10px rgba(255,229,0,.4);
}

/* Secundario: negro con borde, texto blanco */
.btn-secondary {
  background: var(--black);
  color: var(--white);
  border: 1.5px solid var(--black);
}
.btn-secondary:hover {
  background: var(--black-soft);
  border-color: var(--black-soft);
}

.btn-sm {
  padding: .35rem .85rem;
  font-size: .84rem;
  margin-top: 0;
}

/* ── Alertas ─────────────────────────────────────────────────────── */
.alert {
  padding: .85rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1.1rem;
  font-size: .94rem;
  border-left-width: 4px;
  border-left-style: solid;
}
.alert-error   { background: var(--err-bg);  border-color: var(--err);     color: var(--err);     }
.alert-success { background: var(--ok-bg);   border-color: var(--ok);      color: var(--ok);      }
.alert-info    { background: var(--info-bg); border-color: var(--info-col);color: var(--info-col);}
.alert-warning { background: var(--warn-bg); border-color: var(--warn-col);color: var(--warn-col);}

/* ── Resumen (summary list) ──────────────────────────────────────── */
.summary {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-bottom: 1.25rem;
  background: var(--yellow-pale);
  border: 1px solid #F5E500;
  border-radius: 8px;
  padding: .85rem 1.1rem;
}
.summary li { font-size: .95rem; color: var(--black); }
.summary strong { font-weight: 700; }

.txt-error { color: var(--err); }
.txt-ok    { color: var(--ok); }
.txt-warn  { color: var(--warn-col); }

/* ── Tablas ──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: .5rem; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin-top: .4rem;
}

table.data th {
  background: var(--black);
  color: var(--yellow);               /* amarillo sobre negro: contraste perfecto */
  text-align: left;
  padding: .55rem .8rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 700;
  white-space: nowrap;
}

table.data td {
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text);
}

table.data tr:nth-child(even) td { background: #FAFAFA; }
table.data tr:hover td { background: var(--yellow-pale); }

/* Filas de estado */
table.data tr.row-error td { background: #FFF5F5; }
table.data tr.row-warn  td { background: #FFFBEB; }
table.data tr.row-info  td { background: #FFFDE7; }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 5px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .2px;
}

/* Colores con contraste garantizado */
.badge-format    { background: #B71C1C; color: #FFFFFF; }
.badge-shop      { background: #4A148C; color: #FFFFFF; }
.badge-shop-warn { background: #E65100; color: #FFFFFF; }
.badge-case1     { background: #E65100; color: #FFFFFF; }  /* file_dup */
.badge-case2     { background: #0D47A1; color: #FFFFFF; }  /* bd_same  */
.badge-case3     { background: #B71C1C; color: #FFFFFF; }  /* bd_other */

/* ── Columna de valor encontrado ─────────────────────────────────── */
.mono { font-family: 'Consolas', 'Courier New', monospace; font-size: .87em; }

td.val-found,
span.val-found {
  color: var(--err);
  font-weight: 600;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: .87em;
}

/* ── Código inline ───────────────────────────────────────────────── */
code {
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  padding: .1rem .4rem;
  font-size: .84em;
  font-family: 'Consolas', 'Courier New', monospace;
  color: var(--black);
}

/* ── Barra de filtros ────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  align-items: flex-end;
  padding: .85rem 1rem;
  background: var(--black);   /* negro para el fondo */
  border-radius: 8px;
  margin: .8rem 0;
}

.filter-label {
  display: flex;
  flex-direction: column;
  font-size: .82rem;
  font-weight: 700;
  gap: .25rem;
  color: var(--yellow);       /* amarillo sobre negro: visible */
}

.filter-input {
  padding: .4rem .65rem;
  border: 1.5px solid #444;
  border-radius: 6px;
  font-size: .9rem;
  min-width: 160px;
  background: #2C2C2C;
  color: var(--white);        /* texto blanco dentro del input oscuro */
}
.filter-input:focus {
  outline: none;
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255,229,0,.3);
}
.filter-input option { background: #2C2C2C; color: var(--white); }

/* ── Paginador ───────────────────────────────────────────────────── */
.pager {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: .6rem 0 1.25rem;
  font-size: .875rem;
}

.pager-info { color: var(--muted); }

/* ── Acciones (botones en fila) ──────────────────────────────────── */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: center;
  margin: 1rem 0 1.25rem;
}

/* ── Panel de ayuda ──────────────────────────────────────────────── */
.help { margin-top: 1.5rem; }
.help summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--black);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.help summary::before {
  content: "▶";
  color: var(--yellow-dark);
  font-size: .8rem;
  transition: transform .2s;
}
.help[open] summary::before { transform: rotate(90deg); }
.help ul { margin: .7rem 0 0 1.5rem; }

/* ── Footer ──────────────────────────────────────────────────────── */
.footer {
  text-align: center;
  background: var(--black);
  color: rgba(255,255,255,.5);   /* blanco semitransparente sobre negro */
  font-size: .83rem;
  padding: 1.25rem 0;
  margin-top: 3rem;
}
.footer strong { color: var(--yellow); }  /* amarillo sobre negro */

/* ── Login centrado ──────────────────────────────────────────────── */
.card-narrow h1 {
  font-size: 1.3rem;
  border-bottom-color: var(--yellow);
}

/* ── Plantilla de ejemplo ────────────────────────────────────────── */
.template-box {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--yellow-pale);
  border: 1px solid #E6CE00;
  border-radius: 8px;
  padding: .85rem 1rem;
  margin-top: 1.25rem;
}
.template-icon { font-size: 1.5rem; flex-shrink: 0; }

.template-btns {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
  flex-wrap: wrap;
}

/* ── Manual de usuario ───────────────────────────────────────────── */
.manual-link-box {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--black);
  border-radius: 8px;
  padding: .85rem 1rem;
  margin-top: 1rem;
  color: var(--white);
}
.manual-link-box strong { color: var(--yellow); display: block; margin-bottom: 2px; }
.manual-link-box .muted { color: rgba(255,255,255,.65); }

/* ── Scrollbar sutil ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }