/* ============================================================
   style.css — Autorepuestos Valenzuela
   Paleta y tipografia fieles al prototipo (autorepuestosSGR5.3):
   navy #0a246a / #000080, teal #008B8B, beige clasico #d4d0c8/#f0ece4,
   tipografia Tahoma. Adaptado a layout responsive real (el prototipo
   original es MDI de escritorio, no existe en movil de forma literal).
   ============================================================ */

:root {
  --navy: #0a246a;
  --navy-dark: #000080;
  --teal: #008B8B;
  --beige-light: #f0ece4;
  --beige: #d4d0c8;
  --beige-dark: #c0bdb5;
  --texto: #1a1a1a;
  --blanco: #ffffff;
  --error: #a30000;
  --exito: #1a6b1a;
  --advertencia: #8a6200;
  --borde: #909090;
  --radio: 3px;
  --fuente: 'Tahoma', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--teal);
  min-height: 100vh;
}

a { color: var(--navy); }

/* --- Barra superior (equivalente a la barra de titulo del prototipo) --- */
.rv-topbar {
  background: linear-gradient(to right, var(--navy-dark), var(--navy));
  color: var(--blanco);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.rv-topbar .rv-marca { font-weight: bold; font-size: 1.05rem; }
.rv-topbar .rv-usuario { font-size: 0.85rem; display: flex; align-items: center; gap: 10px; }
.rv-topbar a.rv-logout {
  color: var(--blanco); text-decoration: none; border: 1px solid rgba(255,255,255,0.5);
  padding: 4px 10px; border-radius: var(--radio); font-size: 0.8rem;
}
.rv-topbar a.rv-logout:hover { background: rgba(255,255,255,0.15); }

/* --- Layout general --- */
.rv-shell { display: flex; min-height: calc(100vh - 48px); }
.rv-nav {
  background: linear-gradient(to bottom, var(--beige-light), var(--beige));
  border-right: 1px solid var(--borde);
  width: 220px;
  flex-shrink: 0;
  padding: 10px 0;
}
.rv-nav a {
  display: block; padding: 9px 16px; text-decoration: none; color: var(--texto);
  font-size: 0.9rem; border-left: 3px solid transparent;
}
.rv-nav a:hover, .rv-nav a.activo { background: var(--navy); color: var(--blanco); border-left-color: var(--teal); }
.rv-contenido { flex: 1; padding: 20px; background: var(--beige-light); }

/* --- Tarjetas / paneles (equivalente a las ventanas MDI) --- */
.rv-panel {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.15);
  margin-bottom: 18px;
}
.rv-panel__titulo {
  background: linear-gradient(to bottom, var(--navy), var(--navy-dark));
  color: var(--blanco);
  padding: 8px 14px;
  font-weight: bold;
  border-radius: var(--radio) var(--radio) 0 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
}
.rv-panel__cuerpo { padding: 16px; }

/* --- Formularios --- */
.rv-campo { margin-bottom: 14px; }
.rv-campo label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 4px; }
.rv-campo .rv-ayuda { font-size: 0.78rem; color: #555; margin-top: 3px; }
.rv-input, select.rv-input, textarea.rv-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio);
  font-family: var(--fuente); font-size: 0.92rem; background: var(--blanco);
}
.rv-input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--navy); }
.rv-input[readonly] { background: var(--beige-light); color: var(--navy-dark); font-weight: bold; }

/* --- Botones (bisel clasico, con atajo visible) --- */
.rv-btn {
  font-family: var(--fuente); font-size: 0.88rem; padding: 8px 16px;
  border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer;
  background: linear-gradient(to bottom, var(--beige-light), var(--beige));
  display: inline-flex; align-items: center; gap: 8px;
}
.rv-btn:hover { background: linear-gradient(to bottom, #fff, var(--beige-light)); }
.rv-btn:active { background: var(--beige-dark); box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3); }
.rv-btn--primario { background: linear-gradient(to bottom, var(--navy), var(--navy-dark)); color: var(--blanco); border-color: var(--navy-dark); }
.rv-btn--primario:hover { background: linear-gradient(to bottom, #123a8f, var(--navy)); }
.rv-btn--peligro { background: linear-gradient(to bottom, #c0392b, #922b21); color: var(--blanco); border-color: #7b241c; }
.rv-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Atajo de teclado visible dentro del boton (ver MATRIZ_COMANDOS_TECLADO.md) */
.rv-btn .rv-atajo {
  font-size: 0.72rem; background: rgba(0,0,0,0.12); border-radius: 2px; padding: 1px 5px;
  font-family: 'Consolas', monospace;
}
.rv-btn--primario .rv-atajo, .rv-btn--peligro .rv-atajo { background: rgba(255,255,255,0.25); }

/* --- Tablas (equivalente a sgr-grid) --- */
.rv-tabla { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.rv-tabla th {
  background: linear-gradient(to bottom, var(--beige), var(--beige-dark));
  text-align: left; padding: 8px 10px; border: 1px solid var(--borde); font-weight: bold;
}
.rv-tabla td { padding: 7px 10px; border: 1px solid #d8d8d8; }
.rv-tabla tr:nth-child(even) td { background: #f8f5ee; }
.rv-tabla tr:hover td { background: #d0e4ff; cursor: default; }
.rv-tabla tr.rv-fila-activa td { background: var(--navy); color: var(--blanco); }

/* --- Alertas / mensajes --- */
.rv-alerta { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 14px; font-size: 0.9rem; }
.rv-alerta--error { background: #fdecea; color: var(--error); border: 1px solid #f3b8b2; }
.rv-alerta--exito { background: #e9f7ea; color: var(--exito); border: 1px solid #b8dfba; }
.rv-alerta--advertencia { background: #fff6e0; color: var(--advertencia); border: 1px solid #f0d998; }

/* --- Ayuda de teclado (panel flotante, F1 la abre) --- */
.rv-ayuda-teclado {
  position: fixed; bottom: 16px; right: 16px; z-index: 500;
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25); width: 300px; max-height: 70vh; overflow-y: auto;
  display: none;
}
.rv-ayuda-teclado.rv-visible { display: block; }
.rv-ayuda-teclado__titulo {
  background: var(--navy); color: var(--blanco); padding: 8px 12px; font-weight: bold;
  display: flex; justify-content: space-between; align-items: center;
}
.rv-ayuda-teclado__lista { list-style: none; margin: 0; padding: 8px 12px; font-size: 0.82rem; }
.rv-ayuda-teclado__lista li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dotted #ddd; }
.rv-ayuda-teclado kbd {
  font-family: 'Consolas', monospace; background: var(--beige); border: 1px solid var(--borde);
  border-radius: 2px; padding: 1px 5px; font-size: 0.78rem;
}
.rv-boton-ayuda-flotante {
  position: fixed; bottom: 16px; right: 16px; z-index: 499;
  width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff;
  border: none; font-weight: bold; font-size: 1.1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
}

/* --- Login --- */
.rv-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rv-login-caja { width: 100%; max-width: 380px; }
.rv-login-caja .rv-panel__titulo { justify-content: center; font-size: 1.05rem; }
.rv-login-logo { text-align: center; margin-bottom: 6px; color: var(--blanco); font-size: 1.4rem; font-weight: bold; }
.rv-login-sub { text-align: center; color: var(--blanco); margin-bottom: 20px; font-size: 0.85rem; opacity: 0.9; }

/* --- Utilidades --- */
.rv-flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rv-flex--fin { justify-content: flex-end; }
.rv-texto-ayuda { font-size: 0.8rem; color: #555; }
.rv-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem; font-weight: bold; }
.rv-badge--activo { background: #e9f7ea; color: var(--exito); }
.rv-badge--inactivo { background: #fdecea; color: var(--error); }

/* ============================================================
   RESPONSIVE — movil vertical y horizontal
   ============================================================ */
@media (max-width: 860px) {
  .rv-shell { flex-direction: column; }
  .rv-nav {
    width: 100%; display: flex; overflow-x: auto; padding: 0; border-right: none;
    border-bottom: 1px solid var(--borde);
  }
  .rv-nav a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; padding: 12px 14px; }
  .rv-nav a:hover, .rv-nav a.activo { border-left-color: transparent; border-bottom-color: var(--teal); }
  .rv-contenido { padding: 14px; }
  .rv-tabla { display: block; overflow-x: auto; white-space: nowrap; }
  .rv-ayuda-teclado { left: 10px; right: 10px; width: auto; bottom: 70px; }
}

@media (max-width: 480px) {
  .rv-topbar { padding: 8px 10px; }
  .rv-panel__cuerpo { padding: 12px; }
  .rv-btn { width: 100%; justify-content: center; }
  .rv-flex--fin { justify-content: stretch; }
  .rv-flex--fin .rv-btn { width: 100%; }
}

/* Orientacion horizontal en movil: recuperar navegacion lateral compacta */
@media (max-width: 860px) and (orientation: landscape) {
  .rv-shell { flex-direction: row; }
  .rv-nav { width: 64px; flex-direction: column; overflow-x: visible; overflow-y: auto; border-bottom: none; border-right: 1px solid var(--borde); flex-shrink: 0; }
  .rv-nav a { padding: 10px 6px; font-size: 0.72rem; text-align: center; border-bottom: none; border-left: 3px solid transparent; }
  .rv-nav a:hover, .rv-nav a.activo { border-left-color: var(--teal); border-bottom-color: transparent; }
  /* min-width:0 permite que el area de contenido se encoja dentro del flex — sin esto,
     una tabla ancha con overflow-x:auto propio igual fuerza el ancho total de la pagina
     (comportamiento por defecto de flexbox: min-width:auto respeta el contenido interno). */
  .rv-contenido { min-width: 0; }
}

/* ============================================================
   PIE DE MARCA — unico ajuste visual autorizado en esta fase.
   Solo visible en movil (en escritorio el mismo texto va en la barra de
   estado clasica, ver clasico.css/footer_clasico.php). No es un enlace,
   sin logotipo, tipografia y colores ya existentes del sistema.
   ============================================================ */
#rv-footer-movil {
  text-align: center;
  font-size: 0.72rem;
  color: #555;
  padding: 6px 10px;
  background: var(--beige-light);
  border-top: 1px solid var(--beige-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



@media (min-width: 861px) {
  #rv-footer-movil { display: none !important; }
}