/* El admin de Django con el tema de la instalación (tema.css). Solo redefine sus variables y unos pocos
   detalles; el tema es siempre oscuro, así que el selector claro/oscuro del admin se oculta. */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
  --primary: var(--color-superficie-alta);
  --secondary: var(--color-cabecera);
  --accent: var(--color-acento);
  --primary-fg: var(--color-texto);

  --body-fg: var(--color-texto);
  --body-bg: var(--color-fondo);
  --body-quiet-color: var(--color-suave);
  --body-medium-color: #cfcfcf;
  --body-loud-color: #ffffff;

  --header-color: var(--color-suave);
  --header-branding-color: var(--color-texto);
  --header-bg: var(--color-cabecera);
  --header-link-color: var(--color-texto);

  --breadcrumbs-fg: var(--color-suave);
  --breadcrumbs-link-fg: var(--color-texto);
  --breadcrumbs-bg: var(--color-superficie);

  --link-fg: var(--color-acento);
  --link-hover-color: color-mix(in srgb, var(--color-acento) 65%, white);
  --link-selected-fg: var(--color-acento);

  --hairline-color: var(--color-borde);
  --border-color: #3a3a3a;
  --error-fg: var(--color-negativo);

  --message-debug-bg: var(--color-superficie-alta);
  --message-info-bg: #10243a;
  --message-success-bg: #10301d;
  --message-warning-bg: #3a2708;
  --message-error-bg: #3d1010;

  --darkened-bg: var(--color-superficie);
  --selected-bg: #2b2b2b;
  --selected-row: color-mix(in srgb, var(--color-acento) 18%, var(--color-fondo));

  --button-fg: #ffffff;
  --button-bg: var(--color-terciario);
  --button-hover-bg: color-mix(in srgb, var(--color-terciario) 80%, white);
  --default-button-bg: var(--color-acento);
  --default-button-hover-bg: color-mix(in srgb, var(--color-acento) 85%, black);
  --close-button-bg: #3a3a3a;
  --close-button-hover-bg: #4a4a4a;
  --delete-button-bg: #c00000;
  --delete-button-hover-bg: var(--color-secundario);

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: #2b2b2b;
  --object-tools-hover-bg: var(--color-acento);

  color-scheme: dark;
}

.theme-toggle { display: none; }

/* El menú lateral común (cabecera.css) sustituye a la cabecera de Django: se anulan su reparto, su relleno y los
   colores y subrayados que el admin da a todo #header (con un id, ganan a los de cabecera.css). */
#header.cabecera { justify-content: flex-start; padding: 11px 16px 9px; color: var(--color-texto); overflow: visible;
                   background: var(--color-cabecera); }
#header.cabecera a:link, #header.cabecera a:visited { text-decoration: none; }
#header.cabecera .marca:link, #header.cabecera .marca:visited,
#header.cabecera .desplegable a:link, #header.cabecera .desplegable a:visited { color: var(--color-texto); }
#header.cabecera .enlaces a:link, #header.cabecera .enlaces a:visited { color: var(--color-suave); }
#header.cabecera .enlaces a:hover, #header.cabecera .enlaces a:focus-visible { color: var(--color-texto); }
#header.cabecera a[aria-current="page"]:link, #header.cabecera a[aria-current="page"]:visited { color: var(--color-acento); }
/* el botón de cerrar sesión toma la letra del menú, no la pequeña en mayúsculas del admin */
#header.cabecera #logout-form button { color: var(--color-texto); font: inherit; text-transform: none; letter-spacing: inherit;
                                       margin: 0; }
/* Django pone su cabecera en columna por debajo de 1024 px: aquí es al revés (columna solo en escritorio) */
#header.cabecera { flex-direction: row; align-items: center; }
@media (min-width: 1024px) {
  /* el ancho también: el «width: auto» de #header en Django ganaría y el menú crecería con su texto (aviso de la demo) */
  #header.cabecera:has(.enlaces) { flex-direction: column; align-items: stretch; padding: 22px 12px 12px;
                                   width: var(--ancho-menu); }
}
/* para que la cabecera quede fija: Django da al contenedor la altura de la ventana y el contenido la desborda */
#container { height: auto; min-height: 100%; }

/* tipografía de títulos */
#site-name, #content h1, #content h2, .module h2, .module caption, .inline-group h2,
.app-list caption, .breadcrumbs, #user-tools {
  font-family: var(--fuente-titulos);
}
#site-name { font-size: 1.5rem; font-weight: 700; letter-spacing: .01em; }
#site-name a { color: var(--color-texto); }
#content h1 { font-size: 1.9rem; font-weight: 600; }
#user-tools { font-size: .95rem; text-transform: none; letter-spacing: .01em; }

/* cabeceras de módulos: gris oscuro con la línea naranja a la izquierda */
.module h2, .module caption, .inline-group h2 {
  background: var(--color-superficie-alta);
  color: var(--color-texto);
  border-left: 3px solid var(--color-acento);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
}
.module caption a, .module h2 a { color: var(--color-texto); }
.module, .inline-group { background: var(--color-superficie); border-radius: var(--radio); }
fieldset.collapse summary, details summary { color: var(--color-texto); }

/* campos de formulario sobre fondo oscuro */
input, select, textarea, .vTextField, .select2-container--admin-autocomplete .select2-selection {
  background-color: #0f0f0f;
  color: var(--color-texto);
  border-color: #3a3a3a;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-acento); outline: 1px solid var(--color-acento); }

/* botones del tipo enlace («Ver PDF», «Enviar por email», «Convertir en factura») */
a.button, .button, input[type=submit], input[type=button], .submit-row input, a.button:link, a.button:visited {
  border-radius: var(--radio);
}
a.button:link, a.button:visited { background: var(--color-acento); color: #fff; }
a.button:hover { background: color-mix(in srgb, var(--color-acento) 85%, black); }

/* listados */
#changelist-filter { background: var(--color-superficie); }
#changelist-filter h2 { background: var(--color-superficie-alta); border-left: 3px solid var(--color-terciario); }
#changelist-filter li.selected a { color: var(--color-acento); }
thead th, tfoot td { background: var(--color-superficie-alta); color: var(--color-suave); }
.paginator { color: var(--color-suave); }

/* pantalla de inicio de sesión */
.login #container { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.login #header { border-radius: var(--radio) var(--radio) 0 0; }

/* aviso de fecha futura al emitir */
form .aligned .form-row p.help.aviso-futura { color: var(--color-aviso); font-weight: 600; }

/* enlaces de los listados (nombres, números): color del texto y sin subrayado; al pasar, más suaves */
/* con #changelist para ganar a la regla de Django que subraya todos los enlaces; sin :link/:visited porque en los
   visitados el navegador no deja cambiar el subrayado */
#changelist #result_list a { text-decoration: none; }
#result_list a:link, #result_list a:visited { color: var(--color-texto); }
#result_list a:hover, #result_list a:focus-visible { color: var(--color-suave); text-decoration: none; }

/* listado de clientes, a lo CRM: inicial, nombre con el contacto debajo, importes y acciones con icono */
#result_list td { vertical-align: middle; }
#result_list .debajo { display: block; margin-top: 2px; color: var(--color-suave); font-size: .85em; }
#result_list a.nombre { font-weight: 600; }
.field-inicial_col { width: 40px; }
.avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
          background: color-mix(in srgb, var(--color-terciario) 30%, var(--color-superficie-alta));
          color: var(--color-texto); font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.etiqueta-inactivo { margin-left: 6px; padding: 0 7px; border-radius: 99px; font-size: .75em;
                     background: var(--color-superficie-alta); color: var(--color-suave); }
.field-n_facturas, .field-facturado_col, .field-pagado_col, .field-pendiente_col,
.column-n_facturas, .column-facturado_col, .column-pagado_col, .column-pendiente_col {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.field-ultima_col { white-space: nowrap; }
.field-contacto_col .email { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pendiente { color: var(--color-aviso); font-weight: 600; }
.saldado { color: var(--color-suave); }
.acciones { display: inline-flex; gap: 5px; }
#result_list .acciones a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
                           border: 1px solid var(--color-borde); background: var(--color-superficie-alta); color: var(--color-suave); }
#result_list .acciones a:hover, #result_list .acciones a:focus-visible { color: var(--color-texto); border-color: var(--color-suave); }
.acciones svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ficha del cliente: resumen a la izquierda y bloques (pendientes, pagadas, presupuestos) a la derecha */
.ficha-cliente #content { max-width: 1280px; }
.ficha-titulo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ficha-titulo h1 { margin: 0; }
.ficha-botones, .ficha-enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-cliente #content-main a.boton { text-decoration: none; }
.ficha-cliente a.boton { display: inline-block; padding: 8px 14px; border-radius: var(--radio); border: 1px solid var(--color-borde);
                         background: var(--color-superficie-alta); color: var(--color-texto); font-weight: 600; text-decoration: none; }
.ficha-cliente a.boton:hover, .ficha-cliente a.boton:focus-visible { border-color: var(--color-suave); }
.ficha-cliente a.boton-principal { background: var(--color-acento); border-color: var(--color-acento); color: #fff; }
.ficha-cliente a.boton-principal:hover { background: color-mix(in srgb, var(--color-acento) 85%, black); }
.ficha { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
.ficha-resumen, .bloque { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); }
.ficha-resumen { padding: 18px; position: sticky; top: calc(var(--alto-cabecera) + 12px); }
.ficha-quien { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.ficha-quien strong { font-size: 1.05rem; }
.ficha-cliente .debajo { display: block; margin-top: 2px; color: var(--color-suave); font-size: .85em; }
.avatar-grande { width: 52px; height: 52px; border-radius: 14px; font-size: 1.1rem; flex: none; }
.ficha-cliente .etiqueta-inactivo { display: inline-block; margin: 4px 0 0; }
.ficha-totales { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ficha-totales div { padding: 10px 12px; background: var(--color-superficie-alta); border-radius: var(--radio); }
.ficha-totales dt { color: var(--color-suave); font-size: .8rem; }
.ficha-totales dd { margin: 2px 0 0; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ficha-cliente .vencido { color: var(--color-negativo); font-weight: 600; }
.ficha-nota { margin: 8px 0 16px; color: var(--color-suave); font-size: .82rem; }
.ficha-datos { margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--color-borde); }
.ficha-datos dt { color: var(--color-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; margin-top: 12px; }
.ficha-datos dt:first-child { margin-top: 0; }
.ficha-datos dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.ficha-cliente #content-main a:not(.boton):not(.estado) { color: var(--color-texto); text-decoration: none; }
.ficha-cliente #content-main a:not(.boton):not(.estado):hover { color: var(--color-suave); }
.ficha-bloques { display: grid; gap: 20px; min-width: 0; }
.bloque { padding: 4px 18px 10px; overflow-x: auto; }
.bloque header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloque h2 { margin: 12px 0 8px; font-size: 1.05rem; color: var(--color-texto); background: none; padding: 0; }
.bloque header a { font-size: .85rem; color: var(--color-suave) !important; }
.cuenta { display: inline-block; min-width: 1.5em; margin-left: 4px; padding: 0 7px; border-radius: 99px; text-align: center;
          background: var(--color-superficie-alta); color: var(--color-suave); font-size: .8rem; font-weight: 600; }
.lista-ficha { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lista-ficha th { background: none; color: var(--color-suave); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
                  font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--color-borde); }
.lista-ficha td { padding: 9px 10px; border-bottom: 1px solid var(--color-borde); vertical-align: middle; white-space: nowrap; }
.lista-ficha tbody tr:last-child td { border-bottom: 0; }
.lista-ficha tbody tr:hover td { background: var(--color-superficie-alta); }
.lista-ficha .n { text-align: right; }
/* el concepto ocupa lo que sobra y se corta con «…» (entero al pasar el ratón): el total nunca se sale */
.lista-ficha td.titulo { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--color-suave); }
@media (max-width: 600px) { .lista-ficha .titulo { display: none; } }  /* en el móvil, sin hueco: número, fechas y total */
/* ficha del cliente: se ven todas, pero cada lista ocupa como mucho 10 filas y el resto con scroll; cabecera fija */
.lista-scroll { max-height: calc(2rem + 10 * 2.25rem); overflow-y: auto; overscroll-behavior: contain; }
/* cabecera fija: su línea inferior es una sombra, porque con border-collapse el borde se queda en la tabla y deja
   un hueco de 1 px por el que se ven pasar las filas */
.lista-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--color-superficie);
                         border-bottom: 0; box-shadow: inset 0 -1px 0 var(--color-borde); }
.ficha-cliente .estado { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.ficha-cliente .estado-pagada, .ficha-cliente .estado-aprobado { background: color-mix(in srgb, var(--color-positivo) 15%, transparent); color: var(--color-positivo); }
.ficha-cliente .estado-enviado { background: color-mix(in srgb, var(--color-aviso) 15%, transparent); color: var(--color-aviso); }
.ficha-cliente .estado-vencida, .ficha-cliente .estado-rechazado { background: color-mix(in srgb, var(--color-negativo) 15%, transparent); color: var(--color-negativo); }
.ficha-cliente .retraso { color: var(--color-negativo); font-size: .8rem; }
.ficha-cliente .vacio { color: var(--color-suave); padding: 14px 0; margin: 0; }
.ficha-cliente .sin-dato { color: var(--color-suave); }
.ficha-proveedor .lista-simple { margin: 0 0 12px; padding-left: 18px; }  /* reglas del banco */
.ficha-proveedor .lista-simple li { padding: 4px 0; list-style: disc; }
@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr; }
  .ficha-resumen { position: static; }
}

/* portada de Administración: tarjetas por sección (como los bloques de la ficha) y acciones recientes a la derecha */
.portada-admin #content { max-width: 1280px; }
.portada-admin #content-main { float: none; width: auto; }
.portada-admin #content h1 { margin-bottom: 4px; }
.portada-nota { margin: 0 0 18px; color: var(--color-suave); }
.portada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 20px; align-items: start; }
.portada-secciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.portada-secciones .seccion-facturacion:not(.seccion-empresa) { grid-column: 1 / -1; order: -1; }
.portada-admin .bloque h2 { margin: 12px 0 8px; font-size: 1.05rem; color: var(--color-texto); background: none; padding: 0; border: 0; }
.tabla-modelos th.modelo { font-weight: 400; text-align: left; white-space: normal; width: 100%; padding: 9px 10px;
                           border-bottom: 1px solid var(--color-borde); font-size: inherit; text-transform: none; letter-spacing: normal; color: var(--color-texto); }
.tabla-modelos tbody tr:last-child th { border-bottom: 0; }
.tabla-modelos tbody tr:hover th { background: var(--color-superficie-alta); }
.tabla-modelos th.modelo a { font-weight: 600; }
.tabla-modelos td.n { color: var(--color-suave); }
.portada-admin .debajo { display: block; margin-top: 2px; color: var(--color-suave); font-size: .85em; }
.portada-admin #content-main a:not(.boton) { color: var(--color-texto); text-decoration: none; }
.portada-admin #content-main a:not(.boton):hover { color: var(--color-suave); }
.portada-admin .acciones { justify-content: flex-end; }
.portada-admin .acciones a { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
                             border: 1px solid var(--color-borde); background: var(--color-superficie-alta); }
.portada-admin #content-main .acciones a { color: var(--color-suave); }
.portada-admin #content-main .acciones a:hover, .portada-admin #content-main .acciones a:focus-visible { color: var(--color-texto); border-color: var(--color-suave); }
.portada-recientes { position: sticky; top: calc(var(--alto-cabecera) + 12px); }
.recientes { list-style: none; margin: 0 0 6px; padding: 0; }
.recientes li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--color-borde); }
.recientes li:last-child { border-bottom: 0; }
.recientes .que { min-width: 0; overflow-wrap: anywhere; }
.recientes .tipo { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; }
.recientes .tipo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tipo-alta { background: color-mix(in srgb, var(--color-positivo) 15%, transparent); color: var(--color-positivo); }
.tipo-cambio { background: color-mix(in srgb, var(--color-aviso) 15%, transparent); color: var(--color-aviso); }
.tipo-baja { background: color-mix(in srgb, var(--color-negativo) 15%, transparent); color: var(--color-negativo); }
.portada-admin .vacio { color: var(--color-suave); padding: 14px 0; margin: 0; }
@media (max-width: 1000px) {
  .portada { grid-template-columns: 1fr; }
  .portada-recientes { position: static; }
}
@media (max-width: 700px) {
  .portada-secciones { grid-template-columns: 1fr; }
}

/* estado de las facturas (listado y ficha): la misma etiqueta de color que en el Resumen */
.field-estado_col .estado, .readonly .estado { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.field-estado_col .estado-pagada, .readonly .estado-pagada { background: color-mix(in srgb, var(--color-positivo) 15%, transparent); color: var(--color-positivo); }
.field-estado_col .estado-pendiente, .readonly .estado-pendiente { background: color-mix(in srgb, var(--color-aviso) 15%, transparent); color: var(--color-aviso); }
.field-estado_col .estado-vencida, .readonly .estado-vencida { background: color-mix(in srgb, var(--color-negativo) 15%, transparent); color: var(--color-negativo); }
.field-estado_col .estado-borrador, .readonly .estado-borrador { background: var(--color-superficie-alta); color: var(--color-suave); }
.field-estado_col .estado-proforma, .readonly .estado-proforma { background: color-mix(in srgb, var(--color-terciario) 30%, transparent); color: #f2a7d8; }
.field-pdf_icono_col, .column-pdf_icono_col { width: 40px; text-align: center; }

/* presupuestos que se presentan sin IVA */
.sin-iva { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 99px; font-size: .72em; font-weight: 600;
           background: var(--color-superficie-alta); color: var(--color-suave); white-space: nowrap; }
.aviso-pdf { color: var(--color-aviso); font-weight: 600; }

/* líneas de documentos: botón de eliminar y totales en pantalla mientras se editan */
.inline-group button.borrar-linea { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border-radius: 8px; border: 1px solid var(--color-borde); background: var(--color-superficie-alta); color: var(--color-suave); cursor: pointer; }
.inline-group button.borrar-linea:hover, .inline-group button.borrar-linea:focus-visible { color: var(--color-negativo); border-color: var(--color-negativo); }
.inline-group button.borrar-linea svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
tr.linea-eliminada { display: none; }
tr.aviso-eliminada td { color: var(--color-suave); font-style: italic; }
tr.aviso-eliminada button { margin-left: 6px; padding: 2px 10px; border-radius: var(--radio); border: 1px solid var(--color-borde);
  background: var(--color-superficie-alta); color: var(--color-texto); font-style: normal; cursor: pointer; }
.totales-en-vivo { margin: -10px 0 24px auto; max-width: 380px; padding: 12px 16px; border: 1px solid var(--color-borde);
  border-radius: var(--radio); background: var(--color-superficie); }
.totales-en-vivo dl { margin: 0; }
.totales-en-vivo dl div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.totales-en-vivo dt { color: var(--color-suave); }
.totales-en-vivo dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totales-en-vivo .total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--color-borde); font-weight: 700; font-size: 1.1em; }
.totales-en-vivo .total dt { color: var(--color-texto); }
.totales-en-vivo .nota, .totales-en-vivo .vacio { margin: 8px 0 0; color: var(--color-suave); font-size: .8rem; }
@media (max-width: 767px) { .totales-en-vivo { max-width: none; margin-top: 0; } }

/* ------------------------------------------------------------------ iconos de los formularios
   Los de Django (lápiz amarillo, cruz verde, aspa roja, ojo azul y el calendario) se cambian por los de línea del
   resto del diseño (los mismos trazos que ICONOS en formato.py), en botones cuadrados como las acciones de los
   listados. Van como máscara para tomar el color del texto (currentColor). Los selectores llevan un nivel más que los
   de widgets.css de Django, que se carga después. */
:root {
  --icono-editar: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020h4L19%209l-4-4L4%2016z'/%3E%3Cpath%20d='M14%206l4%204'/%3E%3C/svg%3E");
  --icono-nueva: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14M5%2012h14'/%3E%3C/svg%3E");
  --icono-borrar: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h16M10%2011v6M14%2011v6'/%3E%3Cpath%20d='M6%207l1%2013h10l1-13M9%207V4h6v3'/%3E%3C/svg%3E");
  --icono-ver: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M2%2012s3.6-7%2010-7%2010%207%2010%207-3.6%207-10%207S2%2012%202%2012z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E");
  --icono-calendario: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%2010h18M8%203v4M16%203v4'/%3E%3C/svg%3E");
  --icono-anterior: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%206l-6%206%206%206'/%3E%3C/svg%3E");
  --icono-siguiente: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E");
  --icono-reloj: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207v5l3%202'/%3E%3C/svg%3E");
}
.related-widget-wrapper { gap: 6px; align-items: center; }
.related-widget-wrapper a.related-widget-wrapper-link { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px;
  margin: 0; padding: 0; box-sizing: border-box; border: 1px solid var(--color-borde); border-radius: var(--radio);
  background: var(--color-superficie-alta); color: var(--color-suave); opacity: 1; }
.related-widget-wrapper a.related-widget-wrapper-link img { display: none; }
.related-widget-wrapper a.related-widget-wrapper-link::before, .datetimeshortcuts a .date-icon, .datetimeshortcuts a .clock-icon {
  content: ""; display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.related-widget-wrapper a.related-widget-wrapper-link.change-related { --icono: var(--icono-editar); }
.related-widget-wrapper a.related-widget-wrapper-link.add-related { --icono: var(--icono-nueva); }
.related-widget-wrapper a.related-widget-wrapper-link.delete-related { --icono: var(--icono-borrar); }
.related-widget-wrapper a.related-widget-wrapper-link.view-related { --icono: var(--icono-ver); }
.related-widget-wrapper a.related-widget-wrapper-link[href]:hover, .related-widget-wrapper a.related-widget-wrapper-link[href]:focus-visible { color: var(--color-texto);
  border-color: var(--color-suave); }
.related-widget-wrapper a.related-widget-wrapper-link.delete-related[href]:hover { color: var(--color-negativo); border-color: var(--color-negativo); }
.related-widget-wrapper a.related-widget-wrapper-link:focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; }
/* sin cliente elegido, Django quita el enlace de editar, borrar y ver */
.related-widget-wrapper a.related-widget-wrapper-link:not([href]) { opacity: .35; cursor: default; }

/* «Hoy | 📅» → dos botones: «Hoy» y el calendario (o «Ahora» y el reloj); la barra de texto se oculta con font-size 0 */
.datetimeshortcuts { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 0;
  vertical-align: middle; }
.datetimeshortcuts a { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 10px;
  box-sizing: border-box; border: 1px solid var(--color-borde); border-radius: var(--radio);
  background: var(--color-superficie-alta); font-size: .85rem; text-decoration: none; }
.datetimeshortcuts a:link, .datetimeshortcuts a:visited { color: var(--color-suave); text-decoration: none; }
.datetimeshortcuts a:hover, .datetimeshortcuts a:focus-visible { color: var(--color-texto); border-color: var(--color-suave); }
.datetimeshortcuts a:has(.date-icon, .clock-icon) { padding: 0; }
.datetimeshortcuts a .date-icon { --icono: var(--icono-calendario); background-image: none; }
.datetimeshortcuts a .clock-icon { --icono: var(--icono-reloj); background-image: none; }

/* calendario y reloj desplegables: tarjeta oscura como el resto, mes en blanco, flechas de línea y hoy en naranja */
body .calendarbox, body .clockbox { padding: 8px; border: 1px solid var(--color-borde); border-radius: 12px;
  background: var(--color-superficie); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); overflow: visible; }
.calendarbox .calendar caption, .clockbox h2 { margin: 0 0 6px; padding: 6px 0; border: 0; background: transparent;
  color: var(--color-texto); font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 600; text-transform: none; }
.calendarbox .calendar table, .calendarbox .calendar tr { background: transparent; }
.calendarbox .calendar th { padding: 4px 0; border: 0; background: transparent; color: var(--color-suave); font-size: .75rem;
  font-weight: 600; text-transform: uppercase; }
.calendarbox .calendar td { padding: 1px; border: 0; background: transparent; }
.calendarbox .calendar td a { display: grid; place-items: center; width: 32px; height: 30px; padding: 0;
  border-radius: var(--radio); color: var(--color-texto); font-size: .85rem; text-decoration: none; }
.calendarbox .calendar td a:hover, .calendarbox .calendar td a:focus-visible { background: var(--color-superficie-alta);
  color: var(--color-texto); }
.calendarbox .calendar td.today a { box-shadow: inset 0 0 0 1px var(--color-acento); color: var(--color-acento); font-weight: 700; }
.calendarbox .calendar td.selected a { background: var(--color-acento); color: var(--color-sobre-acento); font-weight: 700; }
.calendarbox .calendar td.nonday { background: transparent; }
.calendarbox a.calendarnav-previous, .calendarbox a.calendarnav-next { top: 12px; width: 26px; height: 26px; margin: 0;
  border-radius: var(--radio); background: var(--color-superficie-alta); color: var(--color-suave); font-size: 0;
  display: grid; place-items: center; }
.calendarbox a.calendarnav-previous { left: 10px; } .calendarbox a.calendarnav-next { right: 10px; }
.calendarbox a.calendarnav-previous::before, .calendarbox a.calendarnav-next::before { content: ""; width: 16px; height: 16px;
  background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.calendarbox a.calendarnav-previous { --icono: var(--icono-anterior); }
.calendarbox a.calendarnav-next { --icono: var(--icono-siguiente); }
.calendarbox a.calendarnav-previous:hover, .calendarbox a.calendarnav-next:hover { color: var(--color-texto); background-image: none; }
.calendarbox .calendar-shortcuts, .clockbox .timelist { border-top: 1px solid var(--color-borde); background: transparent;
  color: var(--color-borde); font-size: .82rem; }
.calendarbox .calendar-shortcuts a:link, .calendarbox .calendar-shortcuts a:visited, .clockbox .timelist a:link,
.clockbox .timelist a:visited { color: var(--color-suave); text-decoration: none; }
.calendarbox .calendar-shortcuts a:hover, .clockbox .timelist a:hover { color: var(--color-texto); }
.calendarbox .calendar-cancel, .clockbox .calendar-cancel { margin: 6px -8px -8px; border-top: 1px solid var(--color-borde);
  border-radius: 0 0 12px 12px; background: transparent; }
.calendarbox .calendar-cancel a:link, .calendarbox .calendar-cancel a:visited, .clockbox .calendar-cancel a:link,
.clockbox .calendar-cancel a:visited { color: var(--color-suave); text-decoration: none; }
.calendarbox .calendar-cancel:hover, .clockbox .calendar-cancel:hover { background: var(--color-superficie-alta); }

/* líneas: «Agregar línea» con el + del diseño y el aspa de las filas nuevas como el botón de eliminar de lineas.js */
.inline-group .add-row a:link, .inline-group .add-row a:visited { display: inline-flex; align-items: center; gap: 6px;
  padding: 0; background: none; color: var(--color-acento); font-weight: 600; text-decoration: none; }
.inline-group .add-row a::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icono-nueva) center / contain no-repeat; mask: var(--icono-nueva) center / contain no-repeat; }
.inline-group .add-row a:hover { color: color-mix(in srgb, var(--color-acento) 70%, white); }
.inline-group a.inline-deletelink { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0;
  box-sizing: border-box; border: 1px solid var(--color-borde); border-radius: var(--radio);
  background: var(--color-superficie-alta); color: var(--color-suave); text-indent: 0; font-size: 0; }
.inline-group a.inline-deletelink::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icono-borrar) center / contain no-repeat; mask: var(--icono-borrar) center / contain no-repeat; }
.inline-group a.inline-deletelink:hover { color: var(--color-negativo); border-color: var(--color-negativo); }

/* barra de guardar del admin: «Guardar» en naranja; «Guardar y continuar editando» y «Guardar y añadir otro» como los
   botones secundarios del diseño (oscuros con borde), sin el magenta; «Eliminar» sigue en rojo */
.submit-row input[type=submit], .submit-row a.deletelink, .submit-row a.closelink { min-height: 40px; height: auto;
  padding: 0 16px; border-radius: var(--radio); font-family: inherit; font-size: .92rem; text-transform: none;
  letter-spacing: normal; }
.submit-row input[type=submit]:not(.default) { border: 1px solid var(--color-borde); background: var(--color-superficie);
  color: var(--color-texto); }
.submit-row input[type=submit]:not(.default):hover, .submit-row input[type=submit]:not(.default):focus-visible {
  border-color: var(--color-suave); background: var(--color-superficie-alta); }
.submit-row input[type=submit].default { text-transform: none; border: 1px solid var(--color-acento); background: var(--color-acento);
  color: var(--color-sobre-acento); font-weight: 700; }
.submit-row input[type=submit].default:hover { background: color-mix(in srgb, var(--color-acento) 85%, white); }
.submit-row a.deletelink { display: inline-flex; align-items: center; }

/* ventas antiguas (enlazar líneas de FileMaker con su producto) y bloque «Ventas» de la ficha del producto */
.confirmacion-contenido:has(.ventas-antiguas) { max-width: 1040px; }
.ventas-antiguas { margin: 0 0 20px; padding: 4px 18px 14px; }
.ventas-antiguas h2 { margin: 12px 0 8px; font-size: 1.05rem; color: var(--color-texto); background: none; padding: 0; }
.ventas-antiguas .debajo { display: block; margin-top: 2px; color: var(--color-suave); font-size: .85em; }
.ventas-antiguas select { max-width: 320px; }
.lista-scroll.alta { max-height: calc(2rem + 20 * 2.6rem); }
.field-ventas_col .readonly { width: 100%; }
.ventas-resumen { margin: 0 0 8px; }