/**
 * poncho-custom.css
 * Estilos Poncho / argentina.gob.ar — DocValidar
 * Paleta, tipografía y componentes oficiales del gobierno argentino.
 */

/* ── Variables de la paleta oficial ───────────────────────── */
:root {
  --gob-azul-oscuro:   #242C4F;
  --gob-azul:          #0072BC;
  --gob-azul-claro:    #4698CB;
  --gob-azul-cielo:    #CDE4F5;
  --gob-celeste:       #009BDD;
  --gob-amarillo:      #F5A800;
  --gob-verde:         #3BB44A;
  --gob-rojo:          #D0021B;
  --gob-naranja:       #E5590F;
  --gob-gris-oscuro:   #333333;
  --gob-gris-medio:    #666666;
  --gob-gris:          #AAAAAA;
  --gob-gris-claro:    #EEEEEE;
  --gob-blanco:        #FFFFFF;
  --gob-font:          'Encode Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Reset base Poncho ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--gob-font);
  font-size: 16px;
  color: var(--gob-gris-oscuro);
  background: #F7F9FC;
  line-height: 1.6;
}

/* ── Skip link accesibilidad ──────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--gob-azul);
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  border-radius: 0 0 4px 0;
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ── Navbar top (idéntico a argentina.gob.ar) ─────────────── */
.navbar-top {
  background-color: var(--gob-azul-oscuro) !important;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  min-height: 70px;
}
.navbar-top .navbar-brand { padding: 10px 15px; }
.navbar-top .navbar-brand img { height: 50px; width: auto; }

.border-bottom-amarillo {
  border-bottom: 4px solid var(--gob-amarillo) !important;
}

/* Botón Mi Argentina */
.btn-mi-argentina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 0 18px;
  border-radius: 0;
  border: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity .2s;
}
.btn-mi-argentina:hover { opacity: .85; }
.bg-miarg-azul { background-color: var(--gob-celeste) !important; }

/* ── Breadcrumb Poncho ────────────────────────────────────── */
.breadcrumb {
  background: transparent;
  padding: 12px 0 4px;
  font-size: 13px;
  color: var(--gob-gris-medio);
}
.breadcrumb > li + li::before { color: var(--gob-gris); }
.breadcrumb a { color: var(--gob-azul); }
.breadcrumb .active { color: var(--gob-gris-oscuro); font-weight: 600; }

/* ── Título principal ─────────────────────────────────────── */
h1.activities-sidbar {
  font-size: 2rem;
  font-weight: 700;
  color: var(--gob-azul-oscuro);
  margin-bottom: 8px;
}
.lead { font-size: 1.1rem; color: var(--gob-gris-medio); }

/* ── Panel Poncho ─────────────────────────────────────────── */
.panel-poncho {
  border: 1px solid #DDE3EE;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(36,44,79,.07);
  margin-top: 24px;
}
.panel-poncho .panel-heading {
  background: #F0F4FA;
  border-bottom: 1px solid #DDE3EE;
  padding: 14px 20px;
  border-radius: 5px 5px 0 0;
}
.panel-poncho .panel-heading .panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gob-azul-oscuro);
  letter-spacing: .01em;
}
.panel-poncho .panel-heading .fa { margin-right: 8px; color: var(--gob-azul); }
.panel-poncho .panel-body { padding: 24px; }

/* ── Tabs Poncho ──────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--gob-azul-oscuro);
  margin-top: 20px;
}
.nav-tabs > li > a {
  font-weight: 600;
  color: var(--gob-azul-oscuro);
  border-radius: 4px 4px 0 0;
  font-size: 14px;
  padding: 10px 18px;
}
.nav-tabs > li > a:hover { background: var(--gob-azul-cielo); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background: var(--gob-azul-oscuro);
  color: #fff;
  border-color: var(--gob-azul-oscuro);
}
.tab-content { background: #fff; border: 1px solid #dde3ee; border-top: none; border-radius: 0 0 6px 6px; }
.tab-pane { padding: 0; }

/* ── Botones ──────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--gob-azul) !important;
  border-color: var(--gob-azul) !important;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--gob-azul-oscuro) !important;
  border-color: var(--gob-azul-oscuro) !important;
}
.btn-primary:disabled,
.btn-primary[disabled] {
  background-color: var(--gob-gris) !important;
  border-color: var(--gob-gris) !important;
  cursor: not-allowed;
}

/* ── Formularios ──────────────────────────────────────────── */
.form-control:focus {
  border-color: var(--gob-azul);
  box-shadow: 0 0 0 3px rgba(0,114,188,.18);
}
.url-textarea {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  resize: vertical;
}

/* ── Rate limit badge ─────────────────────────────────────── */
.rate-limit-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  background: var(--gob-gris-claro);
  color: var(--gob-gris-oscuro);
  margin-left: 8px;
  vertical-align: middle;
}
.rate-limit-badge.warn { background: #FFF3CD; color: #856404; }
.rate-limit-badge.danger { background: #FDECEA; color: #B71C1C; }

/* ── Footer — idéntico a argentina.gob.ar ─────────────────── */
.main-footer {
  background: var(--gob-azul-oscuro);
  color: rgba(255,255,255,.85);
  padding: 40px 0 0;
  margin-top: 48px;
}
.main-footer .block-title.section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gob-amarillo);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.main-footer .menu.nav { padding-left: 0; }
.main-footer .menu.nav li { list-style: none; margin-bottom: 6px; }
.main-footer .menu.nav a {
  color: rgba(255,255,255,.8);
  font-size: 13px;
  text-decoration: none;
  transition: color .15s;
}
.main-footer .menu.nav a:hover { color: #fff; text-decoration: underline; }

/* Sub-footer (barra amarilla) */
.border-top-amarillo {
  border-top: 4px solid var(--gob-amarillo) !important;
}
.sub-footer {
  padding: 10px 0;
}

/* Botón punto debug — completamente discreto */
.btn-debug-dot {
  background: none;
  border: none;
  color: rgba(255,255,255,.25);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color .3s;
  user-select: none;
}
.btn-debug-dot:hover { color: rgba(255,255,255,.5); outline: none; }
.btn-debug-dot:focus { outline: none; }

/* ── Modal de autenticación debug ─────────────────────────── */
.debug-auth-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
}
.debug-auth-overlay.hidden { display: none; }
.debug-auth-dialog {
  background: #161B22;
  border: 1px solid #30363D;
  border-radius: 10px;
  padding: 28px 32px;
  width: 300px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.debug-auth-title {
  color: #C9D1D9;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 18px;
}
.debug-auth-title .fa { color: #58A6FF; margin-right: 8px; }
.debug-auth-dialog .form-control {
  background: #0D1117;
  border: 1px solid #30363D;
  color: #C9D1D9;
  font-family: 'Courier New', monospace;
}
.debug-auth-dialog .form-control:focus {
  border-color: #58A6FF;
  box-shadow: 0 0 0 2px rgba(88,166,255,.2);
}
.debug-auth-error {
  font-size: 12px; color: #FF7B72;
  margin: 6px 0 10px; padding: 4px 8px;
  background: rgba(255,123,114,.1);
  border-radius: 4px; border-left: 3px solid #FF7B72;
}
.debug-auth-error.hidden { display: none; }
.debug-auth-actions {
  display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end;
}
.debug-auth-dialog .btn-primary {
  background: #1F6FEB !important;
  border-color: #1F6FEB !important;
}
.debug-auth-dialog .btn-default {
  background: #21262D; border-color: #30363D; color: #C9D1D9;
}

/* ── Drop zone PDF ────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--gob-azul-claro);
  border-radius: 8px;
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  background: #F8FBFF;
  transition: border-color .2s, background .2s;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--gob-azul);
  background: var(--gob-azul-cielo);
}
.drop-zone .drop-icon { display: block; margin: 0 auto 12px; color: var(--gob-azul); }
.drop-zone .drop-text { font-size: 1.1rem; font-weight: 600; color: var(--gob-azul-oscuro); margin: 0; }
.drop-zone .drop-limits { color: var(--gob-gris-medio); }

/* ── QR reader ────────────────────────────────────────────── */
.qr-viewport-wrapper {
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  max-width: 420px;
  margin: 0 auto;
}
.qr-reader-box { width: 100%; }
.qr-status-bar {
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  text-align: center;
  min-height: 30px;
}

/* ── Compare cards ────────────────────────────────────────── */
.compare-source-card {
  border: 1px solid #dde3ee;
  border-radius: 6px;
  padding: 14px;
  background: #F8FBFF;
  margin-bottom: 16px;
  min-height: 100px;
}
.compare-source-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-weight: 600;
}
.compare-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.url-badge  { background: var(--gob-azul);    color: #fff; }
.qr-badge   { background: var(--gob-celeste); color: #fff; }
.pdf-badge  { background: var(--gob-naranja); color: #fff; }