/* Bitácora de viajes, clientes y presupuestos.
   Las pantallas de cuenta tienen su propia hoja (identidad.css) porque van sin
   la barra de la app y centradas; estas viven dentro del layout normal, así que
   el CSS no se puede compartir sin pelearse con el body. Los colores sí son los
   mismos y se declaran igual en los dos sitios. */
:root {
  --navy: #1B3A6B;
  --navy-oscuro: #152F57;
  --azul-claro: #EEF2F8;
  --ambar: #FAD700;
  --borde: #C5D3E8;
  --error: #C62828;
  --exito: #2E7D32;
  --apagado: #6B6B6B;
}

/* ---- Barra de la app ------------------------------------------------------ */
.barra-belen {
  background: var(--navy);
  border-bottom: 4px solid var(--ambar);
}

.barra-belen .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

.barra-belen .navbar-brand:hover { color: #fff; }
.barra-belen .navbar-brand img {
  width: 36px; height: 36px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 2px;
}

.barra-belen .nav-link {
  font-family: 'Oswald', sans-serif;
  font-size: .82rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #C7D6EC !important;
  padding: 8px 12px;
  border-bottom: 3px solid transparent;
}

.barra-belen .nav-link:hover { color: #fff !important; }
.barra-belen .nav-link.activo { color: #fff !important; border-bottom-color: var(--ambar); }
.barra-belen .navbar-toggler { border-color: rgba(255,255,255,.4); }
.barra-belen .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ---- Piezas comunes ------------------------------------------------------- */
.bitacora { font-family: 'Barlow', system-ui, sans-serif; }

.bitacora h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0;
}

.cabecera-pagina {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cabecera-pagina .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.panel {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 5px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.panel > h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 14px;
}

/* ---- Botones -------------------------------------------------------------- */
.btn-belen, .btn-belen-claro, .btn-belen-rojo {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: .82rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  border-radius: 3px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}

.btn-belen { background: var(--navy); color: #fff; }
.btn-belen:hover { background: var(--navy-oscuro); color: #fff; }

.btn-belen-claro { background: #fff; color: var(--navy); border-color: var(--borde); }
.btn-belen-claro:hover { background: var(--azul-claro); color: var(--navy); }

.btn-belen-rojo { background: #fff; color: var(--error); border-color: #EBC4C2; }
.btn-belen-rojo:hover { background: #FDECEA; color: var(--error); }

.btn-belen:active, .btn-belen-claro:active, .btn-belen-rojo:active { transform: scale(.985); }
.btn-chico { padding: 6px 12px; font-size: .74rem; letter-spacing: 1px; }

/* ---- Formularios ---------------------------------------------------------- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 16px;
}

.rejilla .ancho-total { grid-column: 1 / -1; }

.bitacora label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .74rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 5px;
}

.bitacora input[type=text], .bitacora input[type=number], .bitacora input[type=date],
.bitacora input[type=time], .bitacora input[type=search], .bitacora select,
.bitacora textarea {
  width: 100%;
  font-family: 'Barlow', sans-serif;
  font-size: .98rem;
  padding: 9px 11px;
  border: 1.5px solid var(--borde);
  border-radius: 3px;
  background: #fff;
  color: #1b1b1b;
}

.bitacora input:focus, .bitacora select:focus, .bitacora textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,58,107,.15);
}

.bitacora textarea { resize: vertical; min-height: 68px; }
.bitacora .text-danger { display: block; color: var(--error); font-size: .84rem; margin-top: 4px; }

.pie-formulario {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--azul-claro);
}

/* ---- Tablas --------------------------------------------------------------- */
.tabla-belen { width: 100%; border-collapse: collapse; font-size: .95rem; }

.tabla-belen th {
  font-family: 'Oswald', sans-serif;
  font-size: .74rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  text-align: left;
  padding: 10px 12px;
  background: var(--azul-claro);
  border-bottom: 2px solid var(--borde);
  white-space: nowrap;
}

.tabla-belen td { padding: 11px 12px; border-bottom: 1px solid #EDF1F7; vertical-align: top; }
.tabla-belen tbody tr:hover { background: #FAFCFF; }
.tabla-belen .numero { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-belen .acciones-fila { text-align: right; white-space: nowrap; }
.tabla-belen a { color: var(--navy); font-weight: 600; text-decoration: none; }
.tabla-belen a:hover { text-decoration: underline; }

.envoltorio-tabla { overflow-x: auto; }

/* ---- Estados -------------------------------------------------------------- */
.estado {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
}

.estado-pendiente { background: #FFF4D6; color: #8A6400; }
.estado-realizado { background: var(--azul-claro); color: var(--navy); }
.estado-cobrado   { background: #E8F5E9; color: #1B5E20; }
.estado-aceptado  { background: #E8F5E9; color: #1B5E20; }
.estado-cancelado,
.estado-rechazado { background: #FDECEA; color: #8C1D18; }

/* ---- Avisos y vacíos ------------------------------------------------------ */
.aviso-belen {
  background: #E8F5E9;
  border-left: 3px solid var(--exito);
  color: #1B5E20;
  padding: 11px 14px;
  border-radius: 3px;
  margin-bottom: 18px;
  font-size: .95rem;
}

.aviso-belen.malo { background: #FDECEA; border-left-color: var(--error); color: #8C1D18; }

.vacio {
  text-align: center;
  padding: 44px 20px;
  color: var(--apagado);
}

.vacio p { margin: 0 0 16px; }

.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}

.filtros > div { flex: 1 1 150px; min-width: 130px; }
.filtros .botones { flex: 0 0 auto; display: flex; gap: 8px; }

.paginacion { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 18px; }
.paginacion span { color: var(--apagado); font-size: .9rem; }

.resumen { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.resumen div { background: #fff; border: 1px solid var(--borde); border-radius: 5px; padding: 12px 18px; }
.resumen strong { display: block; font-family: 'Oswald', sans-serif; font-size: 1.3rem; color: var(--navy); }
.resumen span { font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--apagado); }

@media (max-width: 560px) {
  .cabecera-pagina .acciones { margin-left: 0; width: 100%; }
  .cabecera-pagina .acciones .btn-belen,
  .cabecera-pagina .acciones .btn-belen-claro { flex: 1; }
}

/* ---- Documento imprimible (presupuesto) ----------------------------------- */
.documento {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 18px;
  font-family: 'Barlow', sans-serif;
  color: #1b1b1b;
}

.doc-cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--navy);
  border-bottom: 4px solid var(--ambar);
  padding: 18px 22px;
}

.doc-cabecera img {
  width: 58px; height: 58px; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 3px; flex-shrink: 0;
}

.doc-marca h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 2px;
}

.doc-marca p { margin: 0; font-size: .82rem; color: #B9CBE6; }

.doc-numero {
  margin-left: auto;
  text-align: right;
  background: #fff;
  border-radius: 3px;
  padding: 8px 14px;
}

.doc-numero span {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: 1.5px;
  color: var(--navy);
}

.doc-numero strong {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  color: #CC0000;
  letter-spacing: 1px;
}

.doc-datos {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-bottom: 1px solid var(--azul-claro);
}

.doc-datos > div { flex: 1 1 240px; font-size: .92rem; }

.doc-datos span {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 3px;
}

.doc-datos strong { display: block; font-size: 1.05rem; margin-bottom: 3px; }
.doc-datos div { color: var(--apagado); }

.doc-tabla { width: 100%; border-collapse: collapse; font-size: .94rem; }
.doc-tabla th {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  text-align: left;
  background: var(--azul-claro);
  padding: 9px 22px;
}
.doc-tabla td { padding: 10px 22px; border-bottom: 1px solid #EDF1F7; }
.doc-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-tabla tfoot td {
  font-family: 'Oswald', sans-serif;
  font-size: 1.05rem;
  color: var(--navy);
  border-top: 2px solid var(--borde);
  border-bottom: none;
  padding-top: 13px;
  padding-bottom: 13px;
  letter-spacing: 1px;
}

.doc-notas { padding: 16px 22px; border-top: 1px solid var(--azul-claro); }
.doc-notas span {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .7rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 4px;
}
.doc-notas p { margin: 0; font-size: .92rem; white-space: pre-line; }

.doc-firma { text-align: center; padding: 18px 22px 6px; }
.doc-firma img { max-width: 160px; max-height: 56px; object-fit: contain; display: block; margin: 0 auto; }
.doc-firma .linea { width: 220px; border-top: 1px solid #333; margin: 2px auto 5px; }
.doc-firma div:last-child { font-size: .84rem; font-style: italic; color: var(--apagado); }

.doc-pie {
  text-align: center;
  padding: 12px 22px 16px;
  font-size: .8rem;
  font-style: italic;
  color: var(--apagado);
}

@media print {
  .sin-imprimir, header, footer, .barra-belen { display: none !important; }
  body { background: #fff; }
  .documento { border: none; margin: 0; }
}