@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

*{ box-sizing:border-box; }
body{ margin:0; font-family:'Inter', Arial, sans-serif; background:#F4F6F8; color:#3D3D42; }

/* ---------- shell: rail de iconos + contenido ---------- */
.app-shell{ display:flex; min-height:100vh; }

.app-rail{
	width:60px; flex-shrink:0; background:#FFFFFF; border-right:1px solid #E1E6EC;
	padding:1.25rem 0; display:flex; flex-direction:column; align-items:center; gap:22px;
}
.app-rail-logo{
	width:32px; height:32px; border-radius:9px; background:#00A896; color:#FFF;
	display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
}
.app-rail-item{ font-size:20px; color:#8896AC; text-decoration:none; display:flex; }
.app-rail-item.activo{ color:#00695C; }
.app-rail-item:hover{ color:#00897B; }
.app-rail-avatar{
	width:28px; height:28px; border-radius:50%; background:#E6F7F5; color:#00695C;
	display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:auto;
}
.app-rail-salir{ margin-top:6px; }
.app-rail-salir:hover{ color:#B3261E; }

.app-content{ flex:1; padding:1.5rem; display:flex; justify-content:center; align-items:flex-start; }
.app-card{
	background:#FFFFFF; border-radius:12px; box-shadow:0 1px 3px rgba(22,35,59,.08);
	width:100%; max-width:920px; padding:0;
}

/* ---------- login (sin rail) ---------- */
.login-wrap{ display:flex; justify-content:center; align-items:center; min-height:100vh; }
.login-card{
	background:#FFFFFF; border:1px solid #E1E6EC; border-radius:10px;
	padding:28px 26px; width:100%; max-width:340px; box-shadow:0 2px 8px rgba(22,35,59,.08);
}
.login-card h1{ font-size:17px; margin:0 0 4px 0; }
.login-sub{ font-size:12px; color:#5A6B85; margin:0 0 18px 0; }
.login-error{ background:#FDEDEC; color:#B3261E; font-size:12px; padding:8px 10px; border-radius:6px; margin-bottom:12px; }
.login-btn{ width:100%; justify-content:center; margin-top:14px; }

/* ---------- formulario por pasos (cajera) ---------- */
.stepper-shell{ display:flex; }
.stepper-main{ flex:1; min-width:0; padding:1.75rem 2rem; }
.resumen{ width:260px; flex-shrink:0; background:#E6F7F5; border-left:1px solid #B7E4DD; padding:1.75rem 1.5rem; display:flex; flex-direction:column; border-radius:0 12px 12px 0; }
.resumen h3{ font-size:16px; font-weight:600; margin:0 0 1.25rem; color:#00695C; }
.resumen-campo{ margin-bottom:14px; }
.resumen-campo span{ display:block; font-size:11px; color:#00897B; margin-bottom:2px; }
.resumen-campo b{ font-size:13.5px; word-break:break-word; color:#00695C; }
.resumen-monto{ font-size:22px; font-weight:600; font-family:'JetBrains Mono', monospace; margin-bottom:1rem; color:#00695C; }

.paso{ margin-bottom:1.5rem; transition:opacity .2s ease; }
.paso.inactivo{ opacity:.5; pointer-events:none; }
.paso-num{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.paso-dot{ width:9px; height:9px; border-radius:50%; background:#00A896; display:inline-block; flex-shrink:0; }
.paso-dot.vacio{ background:none; border:1.5px solid #C7C7CC; }
.paso-dot.hecho{ background:#00A896; }
.paso-label{ font-size:11px; font-weight:600; color:#00695C; text-transform:uppercase; letter-spacing:.5px; }
.paso-label.apagado{ color:#A0A8B4; }
.paso-titulo{ font-size:19px; font-weight:600; margin:0 0 1rem; }
.paso-titulo.chico{ font-size:15px; font-weight:500; margin:0; color:#5A6B85; }

.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:10px 0; }

label.fp-label{ display:block; font-size:11px; color:#5A6B85; margin:8px 0 3px; font-weight:500; }
select.fp-input, input.fp-input, textarea.fp-input{
	width:100%; padding:8px 10px; font-size:13px; border:1px solid #D3D9E2; border-radius:8px;
	background:#FFFFFF; color:#3D3D42; font-family:inherit;
}
select.fp-input:focus, input.fp-input:focus, textarea.fp-input:focus{
	outline:none; border-color:#00A896; box-shadow:0 0 0 3px rgba(0,168,150,.14);
}

.table-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:8px; }

.doc-card{ border:1px solid #E1E6EC; border-radius:8px; padding:12px 14px; margin-bottom:10px; background:#FAFBFC; }
.doc-split{ border:1px solid #E1E6EC; border-radius:10px; padding:14px 16px; margin-bottom:12px; background:#FAFBFC; }

.tarjeta-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.tarjeta-opt{
	position:relative; border:1px solid #D3D9E2; border-radius:8px; padding:12px 8px 10px; text-align:center; cursor:pointer;
	font-family:'Inter', Arial, sans-serif; font-size:12.5px; color:#3D3D42; line-height:1.3; user-select:none; background:#FFF;
	transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.tarjeta-opt svg{ display:block; margin:0 auto 6px; color:#5A6B85; transition:color .15s ease; }
.tarjeta-opt:hover{ border-color:#00A896; transform:translateY(-1px); }
.tarjeta-opt:active{ transform:translateY(0); }
.tarjeta-opt:focus-visible{ outline:2px solid #00A896; outline-offset:2px; }
.tarjeta-opt.activa{ border:2px solid #00A896; background:#E6F7F5; color:#00695C; font-weight:600; }
.tarjeta-opt.activa svg{ color:#00897B; }
.tarjeta-opt .check-icon{ display:none; position:absolute; top:5px; right:6px; color:#00897B; }
.tarjeta-opt .check-icon svg{ display:block; margin:0; }
.tarjeta-opt.activa .check-icon{ display:block; }

@media (prefers-reduced-motion: reduce){
	.tarjeta-opt{ transition:none; }
	.tarjeta-opt:hover{ transform:none; }
}

.doc-card-cambio, .campo-banco, .campo-ref{ margin-top:10px; }

/* ---------- tabla (historial del supervisor) ---------- */
/* ---------- filas-tarjeta (pendientes e historial, sin tabla rigida) ---------- */
.pagina-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }

.filtros-historial{ display:flex; align-items:center; gap:10px; margin-bottom:1.25rem; flex-wrap:wrap; }
.campo-icono{ position:relative; }
.campo-icono .icono-input{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#A0A8B4; display:flex; pointer-events:none; }
.campo-icono input.fp-input{ padding-left:32px; }

.fila-historial-b{
	display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #E1E6EC; border-radius:10px; background:#FFFFFF;
}
.icono-tipo{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icono-tipo.icono-A{ background:#E6F7F5; color:#00695C; }
.icono-tipo.icono-auto{ background:#F4F6F8; color:#5A6B85; }
.icono-tipo.icono-R{ background:#FDEDEC; color:#B3261E; }

.fila-titulo-chips{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; font-weight:500; color:#3D3D42; }
.chip{ background:#F4F6F8; color:#5A6B85; padding:1px 7px; border-radius:6px; font-size:11px; font-weight:600; }
.chip-flecha{ color:#A0A8B4; display:flex; }
.fila-monto{ font-family:'JetBrains Mono', monospace; font-size:13px; color:#3D3D42; font-weight:600; }
.fila-pie{ display:flex; justify-content:space-between; align-items:baseline; margin-top:4px; }
.fila-pie .fila-fecha{ margin:0; }
.chip-A{ background:#E6F7F5; color:#00695C; }
.chip-auto{ background:#F4F6F8; color:#5A6B85; }
.chip-R{ background:#FDEDEC; color:#B3261E; }
.icono-tipo.icono-P{ background:#FFF4E0; color:#93650B; }
.chip-P{ background:#FFF4E0; color:#93650B; }
.filtros-historial > div{ min-width:160px; }
.filtros-historial .fp-label{ margin-top:0; }
.btn-limpiar{ background:#FFFFFF; color:#5A6B85; border:1px solid #D3D9E2; }
.btn-limpiar:hover{ background:#F4F6F8; }

.paginacion{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:1.25rem; }
.pagina-info{ font-size:12.5px; color:#5A6B85; }
.btn-pagina{ padding:7px 14px; }
.fp-btn--disabled{ pointer-events:none; opacity:.4; }
.badge-contador{ background:#E6F7F5; color:#00695C; font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; white-space:nowrap; }

.lista-filas{ display:flex; flex-direction:column; gap:8px; }

.fila-solicitud{
	display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #E1E6EC; border-radius:10px; background:#FFFFFF;
}
.fila-info{ flex:1; min-width:0; }
.fila-titulo{ font-size:13px; font-weight:600; margin:0; color:#3D3D42; }
.fila-detalle{ font-size:12px; color:#5A6B85; margin:3px 0 0; }
.fila-obs{ font-size:11.5px; color:#7A7998; margin:3px 0 0; font-style:italic; }
.fila-fecha{ font-size:11px; color:#A0A8B4; margin:3px 0 0; white-space:nowrap; }
.fila-acciones{ display:flex; gap:8px; flex-shrink:0; }

.fila-historial{
	display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid #E1E6EC; border-radius:10px; background:#FFFFFF;
}
.punto-estado{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.punto-A{ background:#00A896; }
.punto-R{ background:#B3261E; }
.punto-auto{ background:#5A6B85; }

table.fp-results{ width:100%; border-collapse:collapse; font-size:12px; }
table.fp-results th{ text-align:center; background:#00695C; color:#FFFFFF; font-weight:600; padding:8px 6px; font-size:10.5px; text-transform:uppercase; white-space:nowrap; }
table.fp-results th:first-child{ border-radius:8px 0 0 0; }
table.fp-results th:last-child{ border-radius:0 8px 0 0; }
table.fp-results td{ text-align:center; padding:8px 6px; border-bottom:1px solid #EDF0F4; background:#FFFFFF; }
table.fp-results tr:hover td{ background:#F7FAF8; }
table.fp-results td.monto{ text-align:right; font-family:'JetBrains Mono', monospace; }

.fp-empty{ text-align:center; padding:22px; color:#5A6B85; font-size:12.5px; }
.fp-empty b{ display:block; color:#B3261E; font-size:13px; margin-bottom:4px; }

.fp-preview{ margin-top:auto; padding:10px 12px; background:#FFFFFF; border:1px dashed #7FCFC1; border-radius:8px; font-size:12px; color:#00695C; min-height:18px; line-height:1.5; }
.fp-preview.empty{ color:#5A9E93; font-style:italic; }
.fp-msg{ color:#B3261E; font-size:12px; font-weight:600; min-height:16px; margin-bottom:6px; display:block; }

.fp-actions{ display:flex; justify-content:flex-end; margin-top:12px; }
.fp-btn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; background:#00A896; color:#FFFFFF; border:none; border-radius:8px; padding:9px 18px; font-size:12.5px; font-weight:600; font-family:inherit; text-decoration:none; }
.fp-btn:hover{ background:#00897B; }
.fp-btn:disabled{ opacity:.6; cursor:not-allowed; }

.aviso-exito{
	background:#E6F7F5; border:1px solid #7FCFC1; color:#00695C; font-size:13px; font-weight:500;
	padding:12px 16px; border-radius:10px; margin-bottom:1.25rem;
}
.fp-btn--cargando{ opacity:.7; pointer-events:none; cursor:progress; }
.btn-rechazar{ background:#B3261E; }
.btn-rechazar:hover{ background:#8F1E17; }

/* ---------- panel supervisor / historial (siguen usando app-card con padding) ---------- */
.arreglos-fp{ padding:1.5rem; }
.solicitud-card{ border:1px solid #E1E6EC; border-radius:10px; padding:12px 14px; margin-bottom:10px; background:#FAFBFC; }
.solicitud-head{ display:flex; justify-content:space-between; font-size:12px; color:#5A6B85; margin-bottom:6px; }
.solicitud-detalle{ font-size:13px; color:#3D3D42; margin-bottom:6px; }
.solicitud-obs{ font-size:12px; color:#5A6B85; margin-bottom:10px; }
.solicitud-obs span{ display:block; font-weight:600; color:#3D3D42; }
.solicitud-actions{ display:flex; justify-content:flex-end; gap:8px; }

.badge{ padding:2px 8px; border-radius:10px; font-size:10.5px; font-weight:600; color:#FFF; }
.badge-A{ background:#00A896; }
.badge-R{ background:#B3261E; }
.badge-auto{ background:#5A6B85; }

/* ---------- responsive: telefono ---------- */
@media (max-width: 780px){
	.app-content{ padding:10px; }
	.app-rail{ width:52px; gap:16px; }

	.fila-solicitud{ flex-direction:column; align-items:stretch; }
	.fila-acciones{ justify-content:stretch; }
	.fila-acciones .fp-btn{ flex:1; justify-content:center; }
	.fila-historial{ flex-wrap:wrap; }
	.fila-fecha{ width:100%; padding-left:20px; }

	.stepper-shell{ flex-direction:column; }
	.stepper-main{ padding:1.25rem; }
	.resumen{ width:100%; border-left:none; border-top:1px solid #E1E6EC; border-radius:0; }

	.grid2{ grid-template-columns:1fr; }

	select.fp-input, input.fp-input, textarea.fp-input{ font-size:16px; padding:10px; }
	.fp-btn{ width:100%; justify-content:center; padding:12px 18px; font-size:14px; }
	.fp-actions{ justify-content:stretch; }

	.tarjeta-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }

	.arreglos-fp{ padding:1rem; }
	.solicitud-actions{ flex-direction:column; }
	.solicitud-actions .fp-btn{ width:100%; }

	table.fp-results{ font-size:11px; }
}