/* ============================================================
   CRCRT v3.3 - Estilos generales
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Roboto, Arial, sans-serif; background: #f2f2f2; color: #222; min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- RECUADRO 1: Banner ---------- */
.banner { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%); color: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.banner-titulo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-nombre { font-size: 24px; font-weight: 800; letter-spacing: 1px; }
.app-nombre .rc { color: #ffd700; }
.app-autor { font-size: 16px; color: #ffd700; }
.icono-sr { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #d90429; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; border: 2px solid #ffd700; transition: all .2s; }
.icono-sr:hover { background: #ffd700; color: #1a1a2e; }
.banner-version { font-size: 12px; color: #9aa7c0; }
.franja-bandera { height: 10px; background-image: linear-gradient(45deg, #111 25%, transparent 25%, transparent 75%, #111 75%), linear-gradient(45deg, #111 25%, #fff 25%, #fff 75%, #111 75%); background-size: 12px 12px; background-position: 0 0, 6px 6px; }

/* ---------- RECUADRO 2: Navegacion (fija, nunca se oculta) ---------- */
.nav-principal { position: sticky; top: 0; z-index: 1000; display: flex; gap: 4px; background: #d90429; padding: 8px 16px; box-shadow: 0 3px 10px rgba(0,0,0,.28); overflow-x: auto; }
.nav-principal a { color: #fff; text-decoration: none; padding: 8px 18px; border-radius: 6px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-principal a:hover { background: rgba(255,255,255,.22); }
.nav-principal a.activo { background: #1a1a2e; }

/* ---------- RECUADRO 3: Contenido ---------- */
.cuerpo { flex: 1; max-width: 1200px; margin: 20px auto; padding: 0 16px; width: 100%; }
.pie { background: #1a1a2e; color: #9aa7c0; text-align: center; padding: 14px; font-size: 13px; }
.pie a { color: #ffd700; }

/* ---------- Tarjetas y componentes ---------- */
.tarjeta { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.08); margin-bottom: 18px; }
.tarjeta h2 { color: #1a1a2e; margin-bottom: 8px; font-size: 20px; }
.tarjeta h3 { color: #1a1a2e; margin: 16px 0 10px; font-size: 16px; }
.subtitulo { color: #666; font-size: 13px; margin-bottom: 12px; }
.nota { font-size: 12px; color: #888; margin-top: 6px; }
.gris { color: #999; }
.derecha { text-align: right; }
.centro { text-align: center; }
.cabecera-fila { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }

/* Botones */
.btn { display: inline-block; background: #d90429; color: #fff; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 14px; text-decoration: none; }
.btn:hover { background: #a1021f; }
.btn-verde { background: #2e9e44; } .btn-verde:hover { background: #237d35; }
.btn-sec { background: #1a1a2e; } .btn-sec:hover { background: #0f0f22; }
.btn-grande { width: 100%; padding: 14px; font-size: 16px; margin-top: 16px; }
.btn-mini { display: inline-block; background: #1a1a2e; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; font-size: 12px; text-decoration: none; cursor: pointer; margin-right: 4px; }
.btn-peligro { background: #c0392b; }
.btn-peligro:hover { background: #922b21; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { background: #1a1a2e; color: #fff; padding: 10px; font-size: 13px; text-align: left; }
.tabla td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.tabla tr:hover td { background: #faf7f7; }

/* Formularios */
label { display: block; font-size: 13px; font-weight: 600; color: #444; margin: 10px 0 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=month], input[type=time], input[type=number], select, .buscador input, .buscador select { padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; width: 100%; }
.buscador { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.buscador input, .buscador select { flex: 1; min-width: 160px; width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 14px; }
.campo select, .campo input { width: 100%; }
.barra-acciones { display: flex; gap: 10px; margin-top: 16px; }
.inline-form { display: inline; }

/* Alertas */
.alerta { padding: 12px 16px; border-radius: 8px; margin: 10px 0; font-size: 14px; }
.alerta.ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.alerta.error { background: #fdecea; color: #b71c1c; border: 1px solid #ef9a9a; }

/* Estadisticas y accesos */
.estadisticas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { text-align: center; padding: 24px; }
.stat-num { font-size: 26px; font-weight: 800; color: #d90429; }
.stat-txt { font-size: 13px; color: #666; margin-top: 4px; }
.accesos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.acceso { display: block; text-align: center; font-weight: 700; font-size: 15px; color: #1a1a2e; text-decoration: none; padding: 26px 14px; border: 2px solid #eee; border-radius: 10px; transition: all .2s; }
.acceso:hover { border-color: #d90429; background: #fff5f5; }

/* Pistas (venta) */
.pistas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.tarjeta-pista { border: 2px solid #ddd; border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; transition: all .15s; display: block; }
.tarjeta-pista:hover { border-color: #d90429; }
.tarjeta-pista input { display: none; }
.tarjeta-pista:has(input:checked) { border-color: #d90429; background: #fff1f1; box-shadow: 0 0 0 2px #d90429 inset; }
.pista-codigo { font-size: 20px; font-weight: 800; color: #1a1a2e; }
.pista-desc { font-size: 11px; color: #666; margin: 2px 0; }
.pista-cat { font-size: 11px; color: #888; }
.pista-precio { font-size: 16px; font-weight: 800; color: #d90429; margin-top: 6px; }

/* Resumen de venta */
.resumen-venta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; background: #f7f7fa; border-radius: 10px; padding: 16px; margin-top: 14px; }
.rv-item strong { font-size: 18px; color: #d90429; }

/* Busqueda de piloto */
.lista-pilotos { border: 1px solid #ddd; border-radius: 6px; margin-top: 6px; max-height: 200px; overflow: auto; display: none; }
.lista-pilotos:not(:empty) { display: block; }
.lp-item { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 13px; }
.lp-item:hover { background: #d90429; color: #fff; }
.lp-code { color: #888; }
.lp-vacio { padding: 10px; font-size: 13px; color: #888; }
.info-piloto { margin-top: 8px; padding: 10px; background: #eef4fb; border-radius: 8px; font-size: 14px; }

/* Chips de categoria */
.chip { display: inline-block; padding: 3px 10px; border-radius: 12px; font-weight: 800; font-size: 12px; color: #fff; }
.cat-a { background: #2e9e44; } .cat-b { background: #f39c12; } .cat-c { background: #d90429; } .cat-pro { background: #1a1a2e; }

/* Login de ajustes */
.login-box { max-width: 420px; margin: 40px auto; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }

/* Responsivo */
@media (max-width: 640px) {
    .app-nombre { font-size: 19px; }
    .app-autor { font-size: 14px; }
    .nav-principal a { padding: 8px 12px; font-size: 13px; }
}