/* =================================================================================================
   masterconfiguration.css - el estilo de las pantallas de ESTA aplicacion
   MasterConfiguration · .NET 10.0

   Calcado de Interfaces/MainModule/wwwroot/css/mainmodule.css: mismas clases .notice y .login,
   mismo motivo -son de esta aplicacion, no del framework-. Las variables (--dm-*) si son de
   Framework1000 y se siguen usando.
   ================================================================================================= */

/* =================================================================================================
   Aviso a pagina completa: el error y el "no encontrada"
   ================================================================================================= */

.notice {
    max-width: 420px;
    padding: var(--dm-space-6);
    text-align: center;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow);
}

.notice__title {
    margin-bottom: var(--dm-space-3);
    font-size: var(--dm-text-xl);
}

.notice__text {
    margin-bottom: var(--dm-space-4);
    color: var(--dm-text-soft);
}

.notice__link {
    display: inline-block;
    padding: var(--dm-space-2) var(--dm-space-4);
    font-weight: 500;
    color: var(--dm-primary);
    text-decoration: none;
    border: 1px solid var(--dm-primary);
    border-radius: var(--dm-radius-sm);
}

.notice__link:hover {
    color: var(--dm-primary-contrast);
    background: var(--dm-primary);
}

/* =================================================================================================
   Pantalla de entrada del operador
   ================================================================================================= */

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.login__card {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-4);
    width: 100%;
    max-width: 360px;
    padding: var(--dm-space-6);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow-lg);
}

.login__title {
    font-size: var(--dm-text-lg);
    text-align: center;
}

/* Debajo del titulo: de que aplicacion es esta entrada. Ver Login.razor. */
.login__subtitle {
    margin: calc(var(--dm-space-1) * -1) 0 0;
    text-align: center;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.login__field {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-1);
}

.login__label {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-soft);
}

.login__input {
    padding: var(--dm-space-2) var(--dm-space-3);
    font: inherit;
    color: var(--dm-text);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-sm);
}

.login__input:focus {
    border-color: var(--dm-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--dm-primary-light);
}

.login__submit {
    padding: var(--dm-space-3);
    font-weight: 600;
    color: var(--dm-primary-contrast);
    background: var(--dm-primary);
    border: none;
    border-radius: var(--dm-radius-sm);
    cursor: pointer;
}

.login__submit:hover {
    background: var(--dm-primary-dark);
}

.login__error {
    padding: var(--dm-space-2) var(--dm-space-3);
    color: var(--dm-danger);
    background: var(--dm-danger-light);
    border-radius: var(--dm-radius-sm);
    font-size: var(--dm-text-sm);
}

/* =================================================================================================
   Fichas: listas de dato y valor
   ================================================================================================= */

/* Rejilla de dos columnas para un <dl>: la etiqueta a la izquierda y el valor a la derecha, sin
   que ninguna de las dos se salga cuando el valor es largo. */
.facts {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: var(--dm-space-2) var(--dm-space-5);
    margin: 0;
}

.facts dt {
    color: var(--dm-text-muted);
}

.facts dd {
    margin: 0;
    word-break: break-word;
}

.pista {
    margin: var(--dm-space-2) 0 0;
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.ficha__estado {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dm-space-2);
    margin: 0 0 var(--dm-space-5);
}

/* =================================================================================================
   Catalogo de clientes
   ================================================================================================= */

.lista__intro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dm-space-4);
    margin-bottom: var(--dm-space-4);
}

.lista__intro .pista { margin: 0; }

/* La segunda linea de una celda: el dato de apoyo -la base, los dominios- debajo del principal. */
.celda__secundaria {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.row-action--danger { color: var(--dm-danger); }

/* =================================================================================================
   Campo de color: el texto y, al lado, la muestra de lo que hay escrito
   ================================================================================================= */

.color-field {
    display: flex;
    align-items: center;
    gap: var(--dm-space-3);
}

/* El selector tiene ancho fijo, y hay que DECIRLO con la especificidad suficiente:
   dameti-components.css trae `.form-field__control input { width: 100% }`, que son dos clases y
   un elemento, y le ganaba a una clase suelta. Resultado medido: el cuadrito de color ocupaba la
   fila entera. Se ancla la regla al contenedor para empatarle en especificidad y ganarle por
   orden de cascada. */
.color-field .color-field__picker {
    flex: 0 0 auto;
    width: 64px;
    height: 34px;
    padding: 2px;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-sm);
    cursor: pointer;
}

.color-field__value {
    font-family: var(--dm-font-mono);
    font-size: var(--dm-text-sm);
    color: var(--dm-text-soft);
    text-transform: uppercase;
}

/* =================================================================================================
   Iconos del menu

   Son SVG de trazo pintados como MASCARA, no formas dibujadas con bordes de CSS.

   Antes cada icono era un <span> vacio con un ::before al que se le daban bordes, radios y
   tamanos hasta que se pareciera a algo: un circulo por «regional», medio rectangulo por
   «clientes». De cerca parecian glifos rotos, y no habia forma de dibujar un engranaje o una
   papelera con esa tecnica.

   Con mask el color lo pone `background: currentColor`, asi que el icono hereda el color del
   enlace -- incluido el estado activo y el hover -- sin repetir un solo valor. Y sin fuente de
   iconos ni fichero externo: van como data URI en esta misma hoja, que es lo que pide la regla de
   no meter bibliotecas de terceros.
   ================================================================================================= */

.icon-install::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5%22%2F%3E%3Cpath%20d%3D%22M12%2022V12%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-tenants::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22%2F%3E%3Cpath%20d%3D%22M15%2021V11h4a2%202%200%200%201%202%202v8%22%2F%3E%3Cpath%20d%3D%22M9%207h2M9%2011h2M9%2015h2%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18%22%2F%3E%3Cpath%20d%3D%22M5%2021V5a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v16%22%2F%3E%3Cpath%20d%3D%22M15%2021V11h4a2%202%200%200%201%202%202v8%22%2F%3E%3Cpath%20d%3D%22M9%207h2M9%2011h2M9%2015h2%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-regional::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3Cpath%20d%3D%22M12%202a15%2015%200%200%201%200%2020%2015%2015%200%200%201%200-20z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3Cpath%20d%3D%22M12%202a15%2015%200%200%201%200%2020%2015%2015%200%200%201%200-20z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.icon-settings::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%209%204.6a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209c.24.58.8.98%201.51%201H21a2%202%200%201%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%201%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06A1.65%201.65%200%200%200%204.6%2015a1.65%201.65%200%200%200-1.51-1H3a2%202%200%201%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06A1.65%201.65%200%200%200%209%204.6a1.65%201.65%200%200%200%201-1.51V3a2%202%200%201%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06A1.65%201.65%200%200%200%2019.4%209c.24.58.8.98%201.51%201H21a2%202%200%201%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* La lista del historial de una ficha: tres datos por linea y sin tabla, porque no hay nada que
   comparar entre filas -- solo leer en orden. */
.historial {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-2);
}

.historial__item {
    display: grid;
    grid-template-columns: 140px 180px 1fr;
    gap: var(--dm-space-3);
    align-items: baseline;
    padding: var(--dm-space-2) 0;
    border-bottom: 1px solid var(--dm-border);
}

.historial__item:last-child { border-bottom: none; }

.historial__cuando { color: var(--dm-text-muted); font-variant-numeric: tabular-nums; }
.historial__que { font-weight: 500; }

@media (max-width: 700px) {
    .historial__item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* =================================================================================================
   Barra de busqueda, filtro y orden del catalogo

   Es un <form method="get"> a pelo: lo elegido va en la direccion, asi que se puede compartir,
   marcar y recargar. Ver el comentario de TenantList.razor.
   ================================================================================================= */

.filtros {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--dm-space-3);
    margin-bottom: var(--dm-space-4);
    padding: var(--dm-space-4);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
}

.filtros__campo {
    display: flex;
    flex-direction: column;
    gap: var(--dm-space-1);
    min-width: 0;
}

.filtros__campo:first-child { flex: 1 1 260px; }

.filtros__etiqueta {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-soft);
}

.filtros__control {
    padding: var(--dm-space-2) var(--dm-space-3);
    font: inherit;
    color: var(--dm-text);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-sm);
}

.filtros__control:focus {
    border-color: var(--dm-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--dm-primary-light);
}

.filtros__limpiar {
    font-size: var(--dm-text-sm);
    align-self: center;
}

/* --- Paginacion --------------------------------------------------------------------------- */

.paginas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dm-space-4);
    margin-top: var(--dm-space-4);
}

.paginas__cuenta {
    font-size: var(--dm-text-sm);
    color: var(--dm-text-muted);
}

.paginas__salto {
    padding: var(--dm-space-2) var(--dm-space-4);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius-sm);
    text-decoration: none;
}

.paginas__salto:hover {
    background: var(--dm-surface-alt);
    text-decoration: none;
}

@media (max-width: 700px) {
    .filtros { flex-direction: column; align-items: stretch; }
    .filtros__campo:first-child { flex: 1 1 auto; }
}