/* =====================================================================
   fw-md-relieve.css — variante "relieve marcado" del diseno base (#7837)
   ---------------------------------------------------------------------
   Opcional (09-10-2026, Joel: "veo un poco soso el diseno material"): la
   carga fw_md_pagina() encima de fw-zona.css + fw-md.css cuando la app define
   FW_MD_ESTILO = 'relieve' (hoy gestion y joeljr). Sin esa constante, inerte.
   Idea: profundidad real (sombras en capas, elevacion al pasar el raton),
   cabecera con degradado, fondo con tinte del color de la app, iconos en
   chips de color y acentos en titulos y tablas.
   ===================================================================== */

/* Contraste reforzado (09-10-2026, 1.jpg de Joel: "colores uniformes, letras pequenas, casi
   no hay diferencia entre el fondo, el recuadro y la tabla"): fondo de pagina claramente mas
   oscuro que las superficies, bordes visibles, textos mas oscuros y letra mayor. */
body.fw-md-cuerpo,
body.fw-md-cuerpo .fw-md {
    --md-fondo: #e2e1e0;            /* papel de folio, color medio de la muestra de Joel 09-10-2026 */
    --md-superficie: #ffffff;
    --md-superficie-2: #eef3f9;
    --md-borde: #c2ccd8;
    --md-borde-fuerte: #8e9cad;
    --md-texto: #0e1620;
    --md-texto-2: #27333f;
    --md-texto-3: #46525e;
    --md-e1: 0 1px 2px rgba(16, 24, 40, .10), 0 4px 12px rgba(16, 24, 40, .14);
    --md-e2: 0 6px 14px rgba(16, 24, 40, .16), 0 18px 36px rgba(16, 24, 40, .18);
    --md-radio: 14px;
}
body.fw-md-cuerpo {
    /* textura de papel de folio (relieve de ruido iluminado en SVG, mosaico de 300 px sin costuras) */
    background: #e2e1e0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p' color-interpolation-filters='sRGB' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.08' numOctaves='6' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='2' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='45' elevation='50'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix values='0.23 0 0 0 0.712 0.23 0 0 0 0.708 0.23 0 0 0 0.704 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23p)'/%3E%3C/svg%3E") repeat !important;
    background-attachment: fixed !important;
}
body.fw-md-cuerpo .fw-zona.fw-md { background: transparent; font-size: 1.0625rem; }   /* 17 px */

/* ---------- Cabecera: degradado, sombra y linea de acento ---------- */
body.fw-md-cuerpo .fw-md-barra {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--md-barra-fondo) 78%, #fff) 0%,
        var(--md-barra-fondo) 45%,
        color-mix(in srgb, var(--md-barra-fondo) 72%, #000) 100%);
    box-shadow: 0 6px 20px rgba(10, 30, 70, .28);
    border-bottom: 3px solid color-mix(in srgb, var(--md-barra-fondo) 45%, #fff);
}
body.fw-md-cuerpo .fw-md-marca-nombre { font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
body.fw-md-cuerpo .fw-md-nav a { border-radius: 10px; transition: background .15s, transform .15s; }
body.fw-md-cuerpo .fw-md-nav a:hover { transform: translateY(-1px); }
body.fw-md-cuerpo .fw-md-nav a.activo { background: rgba(255, 255, 255, .26); box-shadow: inset 0 -3px 0 #fff, 0 2px 6px rgba(0, 0, 0, .18); font-weight: 600; }

/* ---------- Tarjetas: elevadas y con relieve al pasar el raton ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .card {
    border: 1px solid rgba(16, 24, 40, .06) !important;
    border-radius: var(--md-radio) !important;
    box-shadow: var(--md-e1) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md a .card:hover,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-menu-tarjeta:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--md-e2) !important;
}
/* franja de color arriba en las tarjetas del menu */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-menu-tarjeta { border-top: 4px solid var(--chip, var(--md-acento)) !important; }

/* ---------- Iconos en chips de color (tarjetas del menu) ---------- */
body.fw-md-cuerpo .fw-menu-tarjeta .card-title { display: flex; align-items: center; gap: 12px; font-weight: 700; }
body.fw-md-cuerpo .fw-menu-tarjeta .card-title > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0 !important; border-radius: 12px; font-size: 1.35rem;
    color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--chip, var(--md-acento)) 80%, #fff), var(--chip, var(--md-acento)));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--chip, var(--md-acento)) 40%, transparent);
}
/* una paleta que rota por tarjeta */
body.fw-md-cuerpo .row > div:nth-child(6n+1) .fw-menu-tarjeta { --chip: #1a73e8; }
body.fw-md-cuerpo .row > div:nth-child(6n+2) .fw-menu-tarjeta { --chip: #0f9d76; }
body.fw-md-cuerpo .row > div:nth-child(6n+3) .fw-menu-tarjeta { --chip: #e8710a; }
body.fw-md-cuerpo .row > div:nth-child(6n+4) .fw-menu-tarjeta { --chip: #8e44ad; }
body.fw-md-cuerpo .row > div:nth-child(6n+5) .fw-menu-tarjeta { --chip: #d93025; }
body.fw-md-cuerpo .row > div:nth-child(6n+6) .fw-menu-tarjeta { --chip: #0b8ac2; }

/* tarjetas con icono grande (emoji) como las de Trabajos: icono sobre un disco de color */
body.fw-md-cuerpo .fw-zona .card-body > div[style*="font-size:2rem"] {
    width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 30% 30%, #fff, rgba(var(--md-acento-rgb), .16));
    box-shadow: inset 0 0 0 1px rgba(var(--md-acento-rgb), .18), 0 4px 10px rgba(16, 24, 40, .10);
}
body.fw-md-cuerpo .fw-zona .card .badge { font-size: .8rem; padding: .35em .6em; box-shadow: 0 2px 6px rgba(16, 24, 40, .18); }

/* ---------- Titulos de pantalla con barra de acento ---------- */
body.fw-md-cuerpo .fw-zona.fw-md h1.text-center::after,
body.fw-md-cuerpo .fw-zona.fw-md h3.text-center::after,
body.fw-md-cuerpo .fw-zona.fw-md .text-center > h3::after {
    content: ""; display: block; width: 56px; height: 4px; margin: .55rem auto 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--md-acento), color-mix(in srgb, var(--md-acento) 55%, #fff));
}
body.fw-md-cuerpo .fw-zona.fw-md h1, body.fw-md-cuerpo .fw-zona.fw-md h3 { font-weight: 800; }

/* ---------- Tablas: contenedor elevado y cabecera tintada ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-responsive,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .card:has(> .gdg-responsive) {
    border-radius: var(--md-radio) !important;
    box-shadow: var(--md-e1) !important;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table thead th {
    background: linear-gradient(180deg, rgba(var(--md-acento-rgb), .14), rgba(var(--md-acento-rgb), .08)) !important;
    color: color-mix(in srgb, var(--md-acento) 70%, #000) !important;
    border-bottom: 2px solid rgba(var(--md-acento-rgb), .35) !important;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table tbody tr:hover > * { background: rgba(var(--md-acento-rgb), .05) !important; }

/* ---------- Botones con algo de volumen ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-primary,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-success {
    background: linear-gradient(180deg, color-mix(in srgb, var(--md-acento) 88%, #fff), var(--md-acento)) !important;
    border-color: color-mix(in srgb, var(--md-acento) 85%, #000) !important;
    box-shadow: 0 3px 8px rgba(var(--md-acento-rgb), .35);
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-primary:hover,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-success:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(var(--md-acento-rgb), .40); }

/* ---------- Pie ---------- */
body.fw-md-cuerpo .fw-md-pie { background: rgba(255, 255, 255, .6); backdrop-filter: none; border-top: 1px solid rgba(16, 24, 40, .08); }


/* =====================================================================
   CONTRASTE Y LECTURA (09-10-2026, revision de Joel con 1.jpg)
   ===================================================================== */

/* ---------- Superficies bien delimitadas ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .card,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-responsive {
    background: #fff !important;
    border: 1px solid #a9b6c5 !important;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .card .gdg-responsive { border: 0 !important; }

/* ---------- Titulos mas grandes y oscuros ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md h1 { font-size: 1.875rem; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md h2 { font-size: 1.5rem; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md h3 { font-size: 1.625rem; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md h4 { font-size: 1.3rem; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md h5,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md h6 { font-size: 1.15rem; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md small,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .small { font-size: .9375rem; }

/* ---------- Tabla: cabecera solida, filas alternas marcadas, lineas visibles ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table {
    --bs-table-striped-bg: #e9eff7;
    --bs-table-hover-bg: #cfe0fb;
    --bs-table-border-color: #c7d0db;
    font-size: 1rem;                    /* 16 px */
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table > :not(caption) > * > * {
    padding: 12px 12px;
    border-bottom: 1px solid #c7d0db !important;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table thead th,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table thead th {
    background: linear-gradient(180deg, color-mix(in srgb, var(--md-acento) 88%, #fff), var(--md-acento)) !important;
    color: #fff !important;
    font-size: .95rem; font-weight: 700; letter-spacing: .02em;
    border-bottom: 0 !important;
    padding-top: 13px !important; padding-bottom: 13px !important;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table thead th a,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table thead th a.link-light { color: #fff !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table thead th a:hover { color: #dbe8ff !important; text-decoration: underline; }
/* Bootstrap pinta rayas y hover con un box-shadow interior que taparia estos fondos */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table tbody tr > * { box-shadow: none !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table tbody tr:nth-child(odd) > * { background: #ffffff !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table tbody tr:nth-child(even) > * { background: #e6edf6 !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table tbody tr:hover > * { background: #cfe0fb !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .table tbody td { color: #0e1620; }
/* pie de la tabla (Mostrando / paginas) separado del cuerpo */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .card > .d-flex.justify-content-between,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-responsive + .d-flex {
    background: #eef3f9; border-top: 2px solid #c2ccd8 !important; font-size: .95rem; color: #27333f;
}

/* ---------- Buscador como pieza propia ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .alert:has(> form[role="search"]) {
    background: #fff; border: 1px solid #a9b6c5; box-shadow: var(--md-e1);
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .form-control,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .form-select {
    border: 1px solid #8e9cad; font-size: 1rem; min-height: 44px; color: #0e1620;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .form-control::placeholder { color: #5b6773; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md label { color: #1d2833; font-size: .95rem; }

/* ---------- Botones: mas grandes y con borde claro ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn { font-size: 1rem; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-sm { font-size: .9rem; min-height: 34px; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-outline-primary,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-outline-secondary,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .btn-outline-info { border-color: #8e9cad; }

/* ---------- Paginacion ---------- */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .pagination .page-link { font-size: 1rem; min-width: 38px; text-align: center; border-color: #a9b6c5; color: #0e1620; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .pagination .active .page-link { background: var(--md-acento); border-color: var(--md-acento); color: #fff; }

/* ---------- Barra: letra un poco mayor ---------- */
@media (min-width: 992px) { body.fw-md-cuerpo .fw-md-nav a { font-size: .975rem; } }
body.fw-md-cuerpo .fw-md-marca-nombre { font-size: 1.1rem; }
body.fw-md-cuerpo .fw-md-pie { color: #27333f; font-size: .9rem; background: #d9d8d5; border-top: 1px solid #bdbab5; }


/* =====================================================================
   APROBADO POR JOEL EN GESTION Y MYM (09-10-2026) Y EXTENDIDO A TODAS LAS WEBS CON RELIEVE
   (antes en gestion-diseno.css y zona-privada.css, retiradas)
   ===================================================================== */

/* ---------- Listados (datagrid) ---------- */
/* Datos alineados a la izquierda: el ojo baja en linea recta. Se quedan centrados los
   botones (celda sin data-col), las fechas y la contraseña enmascarada. */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table td[data-col].text-center,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table thead th[data-col] { text-align: left !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table td[data-col*="fecha" i].text-center,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table td[data-col="contra"].text-center,
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table thead th[data-col*="fecha" i],
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table thead th[data-col="contra"] { text-align: center !important; }

/* Direcciones web: una linea cortada con «…» (la direccion completa sale al pasar el raton,
   title de la celda), asi una URL larga no ensancha la tabla ni le quita sitio al nombre. */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table td[data-col="web" i],
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table td[data-col*="url" i],
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table td[data-col*="enlace" i] {
    max-width: 24rem; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis;
}
/* La contraseña enmascarada no necesita mas que su sitio */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table td[data-col="contra"] { width: 1%; white-space: nowrap; }

/* Textos largos dentro de un listado (p. ej. la 1a linea de los tiquets): 3 lineas y «…» */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table .gdg-recorte {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden; overflow-wrap: anywhere;
}

/* ---------- Menu de opciones (tarjetas) ---------- */
/* Iconos sin color (Joel 09-10-2026): chip gris claro con el icono oscuro; la franja de arriba, igual */
body.fw-md-cuerpo .row > div .fw-menu-tarjeta { --chip: #8a949e; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-menu-tarjeta .card-title > i {
    color: #2b3640 !important; background: #eef1f4 !important;
    box-shadow: inset 0 0 0 1px #d3d9df !important;
}
/* Toda la tarjeta lleva a su opcion (el boton es stretched-link): que se note al pasar el raton */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-menu-tarjeta { cursor: pointer; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-menu-tarjeta:hover { border-color: var(--md-acento) !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-menu-tarjeta:hover .btn-outline-primary {
    background: var(--md-acento); border-color: var(--md-acento); color: #fff;
}
/* Resumen de tareas bajo el menu */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-resumen-tareas .card-header { background: #f4f6f8; font-size: 1.05rem; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-resumen-tareas .list-group-item { padding: 12px 16px; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-resumen-tareas .list-group-item { background: #fff; color: #0e1620; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-resumen-tareas a.list-group-item:hover { background: #e9f2f2; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .fw-resumen-tareas a.list-group-item .text-truncate { color: #0e1620; font-weight: 500; }

/* ---------- Buscador ---------- */
/* Con un solo campo donde buscar (p. ej. Tareas: "todos") el desplegable no ofrece nada: fuera */
body.fw-md-cuerpo .fw-zona.fw-md .input-group > .search-panel:has(.dropdown-menu > li:only-child) { display: none; }
body.fw-md-cuerpo .fw-zona.fw-md .input-group:has(> .search-panel .dropdown-menu > li:only-child) > .form-control {
    border-top-left-radius: var(--bs-border-radius) !important; border-bottom-left-radius: var(--bs-border-radius) !important;
}

/* ---------- Botones de filtro (Todas / Abierto / ...) ---------- */
/* El activo (el que no es btn-outline-*) se ve pulsado: solido, letra blanca y hundido */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .d-flex.flex-wrap.gap-2 > a.btn.btn-sm:not([class*="btn-outline"]) {
    background: var(--md-acento) !important; border-color: var(--md-acento) !important; color: #fff !important;
    font-weight: 600; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35) !important; transform: translateY(1px);
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .d-flex.flex-wrap.gap-2 > a.btn.btn-sm[class*="btn-outline"] {
    background: #fff; color: #1d2833; border-color: #a9b6c5;
}

/* ---------- Cabecera de los listados mas junta: mas sitio para la tabla ---------- */
body.fw-md-cuerpo .fw-zona.fw-md .row > .col-12.text-center.mt-3:has(> h3) { margin-top: 4px !important; }
body.fw-md-cuerpo .fw-zona.fw-md .row > .col-12.text-center > h3 { margin-bottom: 6px !important; }
body.fw-md-cuerpo .fw-zona.fw-md .d-flex.flex-wrap.gap-2.mt-2 { margin-top: 4px !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .alert:has(> form[role="search"]) { margin-top: 8px !important; margin-bottom: 4px !important; padding: 8px 10px !important; }
body.fw-md-cuerpo .fw-zona.fw-md .card.shadow.mt-1 { margin-top: 6px !important; }

/* ---------- Listados: remates ---------- */
/* Sin franja blanca entre la ultima fila y el pie (la tabla trae mb-2) */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-responsive > .gdg-table { margin-bottom: 0 !important; }
/* La columna de botones (la primera, sin data-col) solo lo que ocupan los botones */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table:has(thead th:first-child:not([data-col])) > colgroup > col:first-child { width: auto !important; }
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table thead th:first-child:not([data-col]),
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-table tbody td:first-child:not([data-col]) { width: 1%; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
/* Pie del listado (Mostrando / por pagina) en una linea baja */
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-responsive + .d-flex {
    margin: 0 !important; padding: 6px 14px !important; font-size: .9rem;
}
body.fw-md-cuerpo .fw-zona.fw-md.fw-md .gdg-responsive + .d-flex .form-select {
    min-height: 32px; padding-top: 2px; padding-bottom: 2px; font-size: .9rem;
}

/* ---------- Ficha de una contraseña (usuario_contra/ver_contra) ---------- */
/* Etiquetas del mismo ancho: las cajas quedan alineadas en columna */
body.fw-md-cuerpo .fw-zona.fw-md .input-group > .input-group-text.bg-success-subtle { min-width: 8.5rem; }
/* Botones de la derecha (Copiar, Mostrar, Abrir) del mismo ancho */
@media (min-width: 576px) {
    body.fw-md-cuerpo .fw-zona.fw-md .input-group:has(> .input-group-text.bg-success-subtle) > .btn {
        min-width: 7.5rem; display: inline-flex; align-items: center; justify-content: center;
    }
}
/* Mismo hueco entre las tres filas: el aviso bajo la contraseña solo ocupa sitio si dice algo */
body.fw-md-cuerpo .fw-zona.fw-md #contra_aviso { min-height: 0 !important; margin-bottom: 1rem !important; }
body.fw-md-cuerpo .fw-zona.fw-md #contra_aviso:empty { margin-top: 0; }
/* Web vacia: en vez de una caja en blanco, "Sin web" en gris */
body.fw-md-cuerpo .fw-zona.fw-md .input-group:has(> input[readonly][value=""]:not([id])) > input { display: none; }
body.fw-md-cuerpo .fw-zona.fw-md .input-group:has(> input[readonly][value=""]:not([id]))::after {
    content: "Sin web"; flex: 1 1 auto; display: flex; align-items: center; padding: 0 .9rem;
    color: #6b7680; font-style: italic; background: #f4f6f8; border: 1px solid #c2ccd8; border-left: 0;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}
body.fw-md-cuerpo .fw-zona.fw-md .input-group:has(> input[readonly][value=""]:not([id]))::after { min-height: 44px; }
/* Cajas de la ficha sin esquinas redondeadas donde tocan la etiqueta o los botones */
body.fw-md-cuerpo .fw-zona.fw-md .input-group:has(> .input-group-text.bg-success-subtle) > .form-control { border-radius: 0 !important; }
body.fw-md-cuerpo .fw-zona.fw-md .input-group:has(> .input-group-text.bg-success-subtle) > .form-control:last-child {
    border-top-right-radius: var(--bs-border-radius) !important; border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* ---------- Formulario de una contraseña (usuario_contra/editar_contra) ---------- */
/* Igual que la ficha: etiqueta a la izquierda (mismo ancho y estilo) y la caja a su lado */
@media (min-width: 576px) {
    body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .mb-3 {
        display: grid; grid-template-columns: 8.5rem 1fr; align-items: stretch; margin-bottom: .75rem !important;
    }
    body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .mb-3 > .form-label {
        display: flex; align-items: center; margin: 0; padding: 0 .75rem; min-height: 44px;
        font-weight: 600; color: #1d2833; background: var(--bs-success-bg-subtle); border: 1px solid #a9b6c5;
        border-right: 0; border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
    }
    body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .mb-3 > .form-control,
    body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .mb-3 > .form-select,
    body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .mb-3 > .input-group > .form-control {
        border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
    }
    body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .mb-3 > .form-text { grid-column: 2; margin-top: 3px; }
    /* Ver / Generar del mismo ancho que los botones de la ficha */
    body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) .input-group > .btn {
        min-width: 7.5rem; display: inline-flex; align-items: center; justify-content: center;
    }
}
/* Ojo coherente: tachado cuando la clave se ve (el programa cambia el texto Ver/Ocultar) */
body.fw-md-cuerpo .fw-zona.fw-md #contra_clave[type="text"] ~ #contra_ver_tecleo .bi-eye::before { content: "\f340"; }
/* Botones abajo a la izquierda, como en la ficha; Guardar con su icono */
body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .text-center { text-align: left !important; margin-top: 1rem; }
body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .text-center > .btn { min-width: 7.5rem; }
body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .text-center > .btn-primary::before {
    font-family: "bootstrap-icons"; content: "\f633"; margin-right: .4rem; vertical-align: -.125em;
}
body.fw-md-cuerpo .fw-zona.fw-md form:has(> input[name="form_contra"]) > .mb-3 > .form-label .text-danger { margin-left: 4px; }