/* public/assets/app.css */

/* ======= Paleta base (claro) ======= */
:root{
  --primary: #0b5ed7;
  --primary-fg: #fff;

  --body: #f7f8fa;
  --text: #222;
  --muted: #6c757d;
  --line: #dcdcdc;
  --card: #ffffff;
  --tableHead: #f9fafb;

  --link: #0b5ed7;
  --danger: #d00;

  --ok-bg: #e7f5ee;   --ok-bd: #b7e1cc;
  --err-bg: #fdeaea;  --err-bd: #f1b0b7;

  /* altura aproximada de cabecera en rem para sticky */
  --header-h: 0;
}

/* ======= Overrides (oscuro) ======= */
html[data-theme="dark"]{
  --primary: #1f6feb;
  --primary-fg: #fff;

  --body: #0f1216;
  --text: #e6e6e6;
  --muted: #9aa4b2;
  --line: #2a2f36;
  --card: #151a20;
  --tableHead: #0d131a;

  --link: #61a8ff;
  --danger: #ff6b6b;

  --ok-bg: rgba(46, 204, 113, .12);  --ok-bd: #2ecc71;
  --err-bg: rgba(231, 76, 60, .12);  --err-bd: #ff6b6b;
}

/* ======= Grid utilitario ======= */
.form-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}
.field label{display:block;margin:0 0 .25rem;color:var(--muted)}
.field input,.field select{width:100%}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}.col-6{grid-column:span 6}
.col-5{grid-column:span 5}.col-4{grid-column:span 4}.col-3{grid-column:span 3}
@media (max-width:53.75em){/* ~860px */
  .col-8,.col-6,.col-5,.col-4,.col-3{grid-column:span 12}
}

/* ======= Base ======= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--body);color:var(--text)
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

/* Cabecera */
.header{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);z-index:10}
.header .bar{
  width:min(100%, 68.75rem); /* cap tipográfico ~1100px, pero fluye al 100% */
  margin:0 auto;
  display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:.625rem 1rem;
}
.brand{font-weight:700;color:var(--text)}
.nav a{margin-right:.75rem}
.user a{color:var(--danger);text-decoration:none}

/* Contenedor principal */
.container{
  width:min(100%, 68.75rem); /* cap ~1100px */
  margin:1.125rem auto;
  padding:0 1rem;
}
h1{margin:.5rem 0 .75rem;color:var(--text)}

/* ======= Controles ======= */
input,select,textarea{
  width:100%;
  padding:.5rem;
  border:1px solid var(--line);
  border-radius:.5rem;
  background:var(--card);
  color:var(--text)
}
input::placeholder, textarea::placeholder{color:var(--muted)}
label{display:block;margin-bottom:.25rem;color:var(--text)}
.row{display:flex;gap:.75rem;align-items:flex-end;margin:.5rem 0}
.row>*{flex:1}

/* ======= Botones ======= */
.btn{display:inline-block;padding:.5rem .875rem;border:0;border-radius:.5rem;background:var(--primary);color:var(--primary-fg);cursor:pointer;     height: -webkit-fill-available;}
.btn.gray{background:var(--muted);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);padding:.375rem .625rem;border-radius:.5rem}
.btn:disabled,.btn.gray:disabled,.btn.ghost:disabled{opacity:.6;cursor:not-allowed}
.btn.danger{ background:#b12020; color:#fff; border:1px solid #8c1010; }
.btn.danger:hover{ background:#8c1010; }

/* ======= Tarjetas y mensajes ======= */
.card{background:var(--card);border:1px solid var(--line);border-radius:.625rem;padding:1rem}
.msg{padding:.625rem;border-radius:.375rem;margin:.625rem 0}
.ok{background:var(--ok-bg);border:1px solid var(--ok-bd)}
.err{background:var(--err-bg);border:1px solid var(--err-bd)}

/* ======= Tablas ======= */
table{border-collapse:collapse;width:100%;background:var(--card);border:1px solid var(--line)}
th,td{padding:.625rem;border-bottom:1px solid var(--line);text-align:left;color:var(--text)}
th{z-index:1;position:sticky;top:var(--header-h);background:var(--tableHead);font-weight:600}

/* ======= Página de login ======= */
.page-login{width:min(100%, 26rem);margin:5rem auto;padding:0 1rem}
.page-login h1{text-align:center;color:var(--text)}

/* ===== PRINT A4 · ContApp ===== */
.invoice.a4{width:min(100%, 61.25rem);margin:0 auto}
.invoice .inv-header{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.75rem}
.invoice .brand{display:flex;gap:.75rem;align-items:center}
/* Logo en cabecera de factura: tamaño controlado */
.invoice .inv-logo{
  height:5rem; max-height:5rem; width:auto; max-width:11.25rem;
  object-fit:contain; display:block; padding:.375rem; border-radius:.375rem;
}
.invoice .inv-brand-name{font-size:1.15rem;font-weight:700}
.invoice .inv-meta{min-width:15rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:.625rem 0}
.card.plain{background:transparent;border:1px dashed var(--line)}
.inv-lines{width:100%;border-collapse:collapse;margin:.75rem 0}
.inv-lines th,.inv-lines td{border:1px solid var(--line);padding:.375rem .5rem}
.inv-lines th{background:var(--tableHead)}
.totals table{width:100%;border-collapse:collapse}
.totals th,.totals td{padding:.25rem 0}
@media (max-width:53.75em){.grid-2{grid-template-columns:1fr}}

/* ===== PRINT: mostrar SOLO la factura ===== */
@media print{
  @page{size:A4;margin:15mm}
  body{background:#fff !important;color:#000}
  header, footer, nav, .no-print, .btn, .tools{display:none !important}
  .invoice.a4{width:auto;margin:0}
  .card{box-shadow:none !important}
  .inv-lines tr{break-inside:avoid}
  .grid-2{gap:.5rem}
}
/* Doble refuerzo para ocultar todo menos la factura al imprimir */
@media print{
  body * { visibility: hidden !important; }
  .invoice.a4, .invoice.a4 * { visibility: visible !important; }
  @page { size: A4; margin: 15mm; }
  body { background: #fff !important; color: #000; }
}

/* ======= Layout Crear factura desde movimiento ======= */
/* Porcentajes (fluye), con stack en pantallas más estrechas */
.create-invoice-grid{
  display:grid;
  grid-template-columns: 64% 36%;
  gap:1rem; align-items:start;
}
@media (max-width:73.75em){ /* ~1180px → cuando aprieta, apilamos */
  .create-invoice-grid{ grid-template-columns: 1fr; }
}
.create-invoice-grid .grid-right .preview-card{
  border:1px solid var(--line); border-radius:.5rem; padding:.75rem; background:var(--card);
}
.create-invoice-grid .grid-right table{ width:100%; border-collapse:collapse; }
.create-invoice-grid .grid-right th,.create-invoice-grid .grid-right td{
  padding:.375rem .5rem; border-bottom:1px solid var(--line);
}
.create-invoice-grid .grid-right pre{ margin-top:.5rem; white-space:pre-wrap; }

/* Formulario de la columna izquierda en grid fluido (sin mínimos en px) */
.create-invoice-grid .grid-left form.row{
  display:grid !important;
  grid-template-columns: repeat(6, minmax(12ch, 1fr));
  column-gap:.75rem; row-gap:.75rem;
}
@media (max-width:80em){ /* ~1280px */
  .create-invoice-grid .grid-left form.row{ grid-template-columns: repeat(4, minmax(12ch,1fr)); }
}
@media (max-width:61.25em){ /* ~980px (coincide con stack) */
  .create-invoice-grid .grid-left form.row{ grid-template-columns: repeat(2, minmax(12ch,1fr)); }
}
/* Botonera ocupando fila completa, a la derecha */
.create-invoice-grid .grid-left .actions{
  grid-column: 1 / -1; display:flex; gap:.5rem; justify-content:flex-end; align-items:center;
}

/* ======= Tooltips accesibles ======= */
.tip{
  display:inline-block; margin-left:.375rem; cursor:help; user-select:none;
  width:1rem; height:1rem; line-height:1rem; text-align:center;
  font-weight:600; font-size:.75rem; color:#555; background:#eef; border-radius:50%;
  position:relative; outline:none; vertical-align:middle;
}
.tip:hover,.tip:focus{ color:#223; background:#dde; }
.tip:after{
  content: attr(data-tip);
  position:absolute; z-index:20; left:50%; transform:translateX(-50%); bottom:150%;
  padding:.5rem .625rem; max-width:28ch; white-space:normal;
  background:#111; color:#fff; border-radius:.375rem; box-shadow:0 .25rem .875rem rgba(0,0,0,.25);
  font-size:.75rem; line-height:1.3; opacity:0; pointer-events:none; transition:opacity .15s;
}
.tip:before{
  content:""; position:absolute; z-index:21; left:50%; transform:translateX(-50%); bottom:calc(150% - .375rem);
  border:.375rem solid transparent; border-top-color:#111; opacity:0; transition:opacity .15s;
}
.tip:hover:after,.tip:hover:before,.tip:focus:after,.tip:focus:before{ opacity:1; }




/* [PATCH:FA_ICONS_CSS] Botones solo icono + tooltip integrado */
.btn.icon{
  width:2.25rem; height:2.25rem; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.5rem;
}
.btn.icon i{ font-size:1rem; line-height:1; }

/* grupo de acciones en celdas de tabla */
.actions-icongroup{ display:flex; gap:.5rem; align-items:center; }
.actions-icongroup form{ display:inline; }

/* tooltip sobre el propio botón (sin “i” extra) */
.btn.icon[data-tip]{ position:relative; }
.btn.icon[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + .5rem); transform:translateX(-50%);
  background:#111; color:#fff; border-radius:.375rem; padding:.375rem .5rem;
  font-size:.75rem; line-height:1.2; white-space:nowrap;
  box-shadow:0 .25rem .875rem rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .12s ease-in-out;
  z-index:30;
}
.btn.icon[data-tip]::before{
  content:""; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  border:.35rem solid transparent; border-top-color:#111;
  opacity:0; transition:opacity .12s ease-in-out; z-index:31;
}
.btn.icon:hover[data-tip]::after,
.btn.icon:focus-visible[data-tip]::after,
.btn.icon:hover[data-tip]::before,
.btn.icon:focus-visible[data-tip]::before{ opacity:1; }

/* [PATCH:TIP_LABEL] Tooltip aplicado a texto (no icono) */
.tip.tip--label{
  display:inline-block;
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  color:inherit;
  text-decoration: underline dotted;
  cursor: help;
  line-height: inherit;
}
/* Por si la clase .tip aplicaba forma circular o tamaño fijo */
.tip.tip--label i,
.tip.tip--label::before{
  all: unset;
}


.actions-menu{position:relative;display:inline-block;}
.actions-menu__btn{background:#f5f5f5;border:1px solid #ddd;padding:6px 8px;border-radius:6px;cursor:pointer;}
.actions-menu__dropdown{position:absolute;right:0;top:110%;min-width:240px;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px;z-index:2000;}

/* Override de estilo “sólo icono” dentro del menú */
.actions-menu__dropdown .btn.icon{all:unset;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:6px;color:#222;cursor:pointer;font:inherit;}
.actions-menu__dropdown a.btn.icon{text-decoration:none;}
.actions-menu__dropdown .btn.icon:hover{background:#f2f6ff;}
.actions-menu__dropdown .btn.icon.disabled{color:#999;cursor:not-allowed;}
.actions-menu__dropdown .btn.icon i{width:18px;text-align:center;color:#555;}

.actions-menu__sep{border:0;border-top:1px solid #eee;margin:6px 0;}


/* [BEGIN:PATCH:STATUS_PILL_CSS] */
.status-pill{
  border:1px solid #bbb; border-radius:8px; padding:2px 6px;
  background:#f6f6f6; display:inline-block;
}
.status-pill.reconciled{
  background:#e8f1ff; color:#123d7a; border-color:#b7d2ff;
}
/* [END:PATCH:STATUS_PILL_CSS] */

.sidebar .selector {
	width: 100%;
	padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.sidebar .selector label {
	font-size: 1em;
	color: white;
}

/* ====== Panel del Asistente ====== */

/* ====== Panel del Asistente ====== */

.assistant-panel{
  margin: 0 0 1rem 0;
  background:#e2edff;          /* azul clarito de fondo */
  border-color:#d0e3ff;
}

.assistant-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.35rem;
}

.assistant-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.7;
}

.assistant-summary{
  margin:.15rem 0 0 0;
  font-size:.95rem;
  font-weight:600;
}

.assistant-status-pill{
  align-self:flex-start;
  font-size:.7rem;
  padding:.2rem .6rem;
  border-radius:999px;
  border:1px solid transparent;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.9;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* El fondo se mantiene azul; solo variamos el borde según estado */

.assistant-panel.status-ok{
  border-color:#b7e4c7;
}
.assistant-panel.status-info{
  border-color:#9ec5fe;
}
.assistant-panel.status-warn{
  border-color:#8fb5ff;
}
.assistant-panel.status-error{
  border-color:#ffa8a8;
}

.assistant-panel.status-ok .assistant-status-pill{
  border-color:#37b24d;
}
.assistant-panel.status-info .assistant-status-pill{
  border-color:#1c7ed6;
}
.assistant-panel.status-warn .assistant-status-pill{
  border-color:#f08c00;
}
.assistant-panel.status-error .assistant-status-pill{
  border-color:#e03131;
}

.assistant-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.25rem 0 .35rem 0;
}

.assistant-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.35rem .75rem;
  border-radius:.4rem;
  border:1px solid var(--line);
  font-size:.85rem;
  text-decoration:none;
  background:#ffffffaa; /* botón sobre fondo azul */
}

.assistant-link:hover{
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.02), 0 1px 2px rgba(0,0,0,.1);
}

.assistant-hints{
  margin:.25rem 0 0 0;
  padding-left:1.1rem;
  font-size:.8rem;
  color:var(--muted);
}
.assistant-hints li{
  margin:.1rem 0;
}

.tag.archived{
  background:#f5f5f5;
  color:#999;
}


.nav-group {
  display: flex;
  flex-direction: column;
}

.nav-link-parent {
  justify-content: space-between;
  cursor: pointer;
}

/* submenú oculto por defecto */
.nav-sub {
  display: none;
  flex-direction: column;
  margin-left: 1.75rem;
  margin-top: 2px;
}

/* cuando el grupo está abierto, se ve */
.nav-group.nav-group-open > .nav-sub {
  display: flex;
}

.nav-sublink {
  font-size: .92rem;
  padding: .4rem .75rem .4rem .25rem;
}


/* ===== Menú de acciones contextual (xtra-menu) ===== */
.xtra-menu {
  display: inline-block;
  position: relative;
}

.xtra-menu > summary {
  list-style: none;
}

.xtra-menu > summary::-webkit-details-marker {
  display: none;
}

.xtra-menu__list {
  position: absolute;
  right: 0;
  top: 110%;
  min-width: 260px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 6px;
  z-index: 2000;
}

.xtra-menu__list .btn.icon {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  color: #222;
  cursor: pointer;
  font: inherit;
}

.xtra-menu__list a.btn.icon {
  text-decoration: none;
}

.xtra-menu__list .btn.icon:hover {
  background: #f2f6ff;
}

.xtra-menu__list .btn.icon.disabled {
  color: #999;
  cursor: not-allowed;
}

.xtra-menu__list .btn.icon i {
  width: 18px;
  text-align: center;
  color: #555;
}

.xtra-menu__sep {
  border: 0;
  border-top: 1px solid #eee;
  margin: 6px 0;
}