/* public/assets/css/components/panel-form.css
   Componente: tarjeta de panel + formulario de datos (patron "Mi perfil").
   Es el componente base para cualquier pantalla de recogida/edicion de
   datos (crear/editar cualquier entidad futura): tarjeta .app-panel,
   rejilla de campos .app-form-grid,
   separadores de seccion, botones, avatar/logo adaptable y resumen lateral.
   Para una pantalla nueva de este tipo, reutiliza estas mismas clases en
   vez de crear estilos de formulario propios. */

/* Los "modulos"/tarjetas tambien siguen la personalizacion: un tinte muy
   suave del color_principal del usuario en vez de blanco plano igual para
   todos, con el borde igualmente teñido en vez de un gris fijo. */
.app-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--app-surface) 0%, rgba(var(--app-primary-rgb), 0.035) 100%);
    border: 1px solid rgba(var(--app-primary-rgb), 0.14);
    border-radius: var(--app-radius-lg);
    padding: var(--app-space-lg);
    box-shadow: var(--app-shadow-soft);
}
/* Mismo triangulo diagonal que separa cabecera/footer del panel de
   secciones (ver .app-nav-secciones::before en nav-secciones.css), pero en
   tono oscuro de marca y muy tenue porque aqui va sobre una tarjeta clara,
   no sobre el degradado: repite el mismo dibujo para mantener la
   separacion visual en toda la app en vez de un corte plano. */
.app-panel::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(70px, 10vw, 220px);
    height: 100%;
    background: var(--app-primary-dark);
    opacity: .05;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    pointer-events: none;
}
.app-panel > * { position: relative; z-index: 1; }
.app-panel ul { margin: 0; padding-left: var(--app-space-lg); color: var(--app-text-soft); line-height: 1.7; }

.app-defs { display: grid; grid-template-columns: 140px 1fr; gap: var(--app-space-sm) var(--app-space-md); }
.app-defs dt { color: var(--app-text-soft); }
.app-defs dd { margin: 0; font-weight: 700; color: var(--app-text); }

/* linear-gradient(rgba(0,0,0,.32)...) + var(--app-gradient): mismo overlay
   oscuro que ya usan header.css/footer.css. Sin el, el extremo mas claro de
   --app-gradient (--app-tono-75) se queda con poco contraste contra el
   texto blanco y se lee borroso/poco definido, sobre todo en texto pequeño. */
/* font-size explicito obligatorio aqui: un <button> NO hereda el font-size
   del body como si hace un <a> (el UA-stylesheet de los controles de
   formulario trae su propio tamaño por defecto, distinto del texto normal),
   asi que sin esto un <button class="app-button"> (p.ej. "Ver conversación")
   se ve mas pequeño que un <a class="app-button"> (p.ej. "Volver...") aunque
   compartan la misma clase. font-family ya se fuerza para inputs/botones en
   base.css, pero no el tamaño. */
.app-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 var(--app-space-lg); background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), var(--app-gradient); color: var(--app-on-primary); font-size: var(--app-text-sm); font-weight: 600; border-radius: var(--app-radius-md); border: none; cursor: pointer; box-shadow: 0 14px 28px rgba(var(--app-primary-rgb), 0.22); transition: transform .2s ease, box-shadow .2s ease; }
.app-button:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(var(--app-primary-rgb), 0.28); }

/* Fila de acciones de un formulario: el boton principal (submit, ligado al
   formulario por el atributo HTML "form" en vez de estar anidado dentro) y
   una accion secundaria/peligrosa (p. ej. eliminar), en la misma fila,
   repartiendose el ancho al 50% cada uno -mismo patron de fila de 2 botones
   ya usado en ".app-buscador-pie" (Aplicar/Limpiar) y ".app-confirm-acciones"
   (Cancelar/Confirmar)-, en vez de quedarse cada uno al ancho de su texto. */
.app-form-acciones { display: flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; gap: var(--app-space-md); margin: var(--app-space-sm) 0 var(--app-space-md); }
.app-form-acciones > .app-button,
.app-form-acciones > form { flex: 1 1 0; min-width: 180px; margin: 0; }
.app-form-acciones > form { display: flex; }
.app-form-acciones > form > .app-button { flex: 1; }
/* Boton secundario de toda la app: contorno en el color principal (sigue
   la personalizacion de cada usuario via --app-primary), no blanco/gris
   neutro, para que se lea como "de la app" pero distinto del boton
   principal (que va relleno con el degradado). */
.app-button-secondary {
    background: rgba(var(--app-primary-rgb), 0.06);
    color: var(--app-primary-dark);
    border: 1.5px solid var(--app-primary);
    box-shadow: none;
}
.app-button-secondary:hover {
    background: rgba(var(--app-primary-rgb), 0.14);
    border-color: var(--app-primary-dark);
    box-shadow: none;
}

/* Resumen de entidad (avatar + nombre + rol/estado), pensado para la
   tarjeta lateral "Resumen" de Mi perfil, reutilizable en cualquier ficha
   (p. ej. resumen de un empleado). */
.app-profile-summary-card {
    display: flex;
    align-items: center;
    gap: var(--app-space-md);
    margin-bottom: var(--app-space-md);
    padding: var(--app-space-sm) var(--app-space-md) var(--app-space-sm) var(--app-space-sm);
    border-radius: var(--app-radius-lg);
    background: var(--app-gradient);
    box-shadow: 0 14px 28px rgba(var(--app-primary-rgb), 0.22);
}
.app-profile-summary-name { display: block; color: var(--app-on-primary); font-size: var(--app-text-md); }
.app-profile-summary-role { display: block; color: rgba(var(--app-on-primary-rgb), 0.82); font-size: var(--app-text-2xs); font-weight: 700; }

.app-profile-grid { display: grid; grid-template-columns: 1fr; gap: var(--app-space-lg); align-items: start; }
@media (min-width: 901px) {
    .app-profile-grid { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
}

/* El avatar/logo se adapta a la imagen subida (rectangulo con esquinas
   redondeadas, sin recortar a circulo) y admite fondo de color (degradado
   de marca) o fondo blanco, a eleccion del usuario, para que un icono
   oscuro siga siendo legible. */
.app-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius-md);
    background: rgba(var(--app-on-primary-rgb), 0.18);
    color: var(--app-on-primary);
    font-weight: 700;
    overflow: hidden;
    padding: var(--app-space-xs);
}
.app-avatar img { width: 100%; height: 100%; object-fit: contain; border-radius: calc(var(--app-radius-md) - 4px); }
.app-avatar-sm { width: 38px; height: 38px; font-size: var(--app-text-sm); border-radius: var(--app-radius-sm); padding: var(--app-space-xs); background: var(--app-gradient); }
.app-avatar-sm img { border-radius: calc(var(--app-radius-sm) - 3px); }
.app-avatar-md { width: 46px; height: 46px; font-size: var(--app-text-lg); }
.app-avatar-lg { width: 84px; height: 84px; font-size: var(--app-text-2xl); border-radius: var(--app-radius-lg); padding: var(--app-space-xs); background: var(--app-gradient); }
.app-avatar-lg img { border-radius: calc(var(--app-radius-lg) - 6px); }
.app-avatar-fondo-claro { background: var(--app-surface) !important; color: var(--app-primary-dark); border: 1px solid var(--app-border-soft); }

.app-form { display: flex; flex-direction: column; gap: var(--app-space-xs); }
.app-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--app-space-md) var(--app-space-lg); margin-bottom: var(--app-space-sm); }
@media (min-width: 901px) {
    .app-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.app-form-group-full { grid-column: 1 / -1; }
.app-form-group { display: grid; gap: var(--app-space-xs); margin-bottom: var(--app-space-md); max-width: 360px; }
.app-form-group label { font-size: var(--app-text-sm); color: var(--app-text-soft); font-weight: 700; }
.app-form-group input,
.app-form-group select { min-height: 40px; padding: 0 var(--app-space-md); border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); font-size: var(--app-text-md); background: var(--app-surface); color: var(--app-text); }
/* Igual que input/select, pero sin min-height fijo (usa rows) y con
   box-sizing propio: por defecto un <textarea> no hereda el ancho del
   contenedor (se dimensiona por el atributo "cols"), lo que lo dejaba
   descuadrado y con scroll horizontal dentro de cualquier formulario. Solo
   se permite crecer en vertical (resize: vertical), nunca en horizontal. */
.app-form-group textarea { box-sizing: border-box; width: 100%; padding: var(--app-space-sm) var(--app-space-md); border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); font-size: var(--app-text-md); background: var(--app-surface); color: var(--app-text); resize: vertical; }
/* Dentro de .app-form-grid los campos ocupan toda la columna disponible. */
.app-form-grid .app-form-group { max-width: none; }
.app-form-group-color input[type="color"] { min-height: 48px; width: 96px; padding: var(--app-space-xs); cursor: pointer; }

.app-section-divider { margin: var(--app-space-lg) 0 var(--app-space-xs); padding-top: var(--app-space-lg); border-top: 1px solid var(--app-border-soft); }
.app-section-divider h3 { margin: 0; font-size: var(--app-text-md); font-weight: 700; color: var(--app-text); }

.app-logo-editor { display: flex; align-items: center; gap: var(--app-space-lg); flex-wrap: wrap; margin-bottom: var(--app-space-xs); }
.app-logo-controls h3 { margin: 0 0 var(--app-space-xs); font-size: var(--app-text-md); font-weight: 700; }
.app-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--app-space-sm);
    padding: 0 var(--app-space-md);
    min-height: 38px;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-soft);
    border: 1px solid var(--app-border);
    font-size: var(--app-text-sm);
    font-weight: 600;
    color: var(--app-text);
    cursor: pointer;
}
.app-file-button:hover { border-color: var(--app-primary); color: var(--app-primary); }

.app-checkbox-line { display: flex; align-items: center; gap: var(--app-space-sm); margin-top: var(--app-space-sm); font-size: var(--app-text-xs); color: var(--app-text-soft); font-weight: 600; cursor: pointer; }
.app-checkbox-line input { accent-color: var(--app-primary); width: 16px; height: 16px; }

/* Mismo mecanismo que .app-form (flex-column sin align-items -> stretch):
   el boton de una sola accion (Guardar imagen/color, Restablecer...) queda
   siempre al 100% de ancho, igual que "Guardar cambios"/"Guardar permisos"
   en .app-form. Antes .app-color-form era un bloque normal (sin display
   propio) y sus botones se quedaban al ancho de su contenido: mismo
   componente .app-button con tamaños distintos segun la pantalla. */
.app-color-form { display: flex; flex-direction: column; margin-bottom: var(--app-space-md); }
.app-color-form:last-child { margin-bottom: 0; }

.app-preview-gama { display: flex; gap: var(--app-space-sm); margin: var(--app-space-xs) 0 var(--app-space-lg); }
.app-preview-swatch { display: block; width: 40px; height: 40px; border-radius: var(--app-radius-sm); border: 1px solid var(--app-border-soft); box-shadow: var(--app-shadow-soft); }