/* Generador de firmas de Akrolih — interfaz interna */

:root {
    --morado:       #A16095;
    --morado-hondo: #7E3F78;
    --ciruela:      #301124;
    --oro:          #EFC14C;
    --tinta:        #2B2431;
    --tinta-suave:  #6C6577;
    --linea:        #E4DEE6;
    --papel:        #FFFFFF;
    --fondo:        #F7F4F8;
    --error:        #B3261E;
    --ok:           #1E6B4F;
    --radio:        12px;
    --sombra:       0 1px 2px rgba(48, 17, 36, .06), 0 8px 24px rgba(48, 17, 36, .07);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: 26px; line-height: 1.2; margin: 0 0 4px; letter-spacing: -.2px; }
h2 { font-size: 17px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 22px 0 6px; text-transform: uppercase; letter-spacing: .6px; color: var(--tinta-suave); }
a  { color: var(--morado-hondo); }

/* ------------------------------------------------------------------ barra */
.barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 12px 28px;
    background: var(--papel); border-bottom: 1px solid var(--linea);
}
.barra__marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinta); }
.barra__marca img { display: block; }
.barra__marca span {
    font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    color: var(--tinta-suave); padding-left: 14px; border-left: 3px solid var(--oro);
}
.barra__nav { display: flex; align-items: center; gap: 14px; }
.barra__usuario { font-size: 14px; color: var(--tinta-suave); }

.contenido { max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px; }
.pie { padding: 0 24px 34px; text-align: center; font-size: 12px; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- titular */
.titular { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.titular__texto { margin: 0; color: var(--tinta-suave); font-size: 14px; }
.titular__botones { display: flex; gap: 10px; }

/* ---------------------------------------------------------------- botones */
.boton {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border: 1px solid transparent; border-radius: 999px;
    font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
    cursor: pointer; transition: background .15s, border-color .15s, color .15s;
    background: var(--papel); color: var(--tinta);
}
.boton--principal { background: var(--morado); color: #fff; }
.boton--principal:hover { background: var(--morado-hondo); }
.boton--fantasma { background: var(--papel); border-color: var(--linea); color: var(--tinta); }
.boton--fantasma:hover { border-color: var(--morado); color: var(--morado-hondo); }
.boton--peligro { background: transparent; border-color: transparent; color: var(--error); }
.boton--peligro:hover { background: #FCEDEC; }
.boton--pequeno { padding: 7px 13px; font-size: 13px; }
.boton--ancho { width: 100%; justify-content: center; }
.en-linea { display: inline; }

/* --------------------------------------------------------------- mensajes */
.aviso { margin: 0 0 18px; padding: 11px 16px; border-radius: var(--radio); font-size: 14px; }
.aviso--error { background: #FCEDEC; color: var(--error); }
.aviso--ok    { background: #E7F4EE; color: var(--ok); }

/* --------------------------------------------------------------- formularios */
.campo { display: block; margin-bottom: 16px; }
.campo__etiqueta { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.campo__control {
    width: 100%; padding: 11px 14px; border: 1px solid var(--linea); border-radius: 10px;
    background: var(--papel); color: var(--tinta); font: inherit; resize: vertical;
}
.campo__control:focus { outline: 2px solid var(--morado); outline-offset: 1px; border-color: var(--morado); }
.campo__ayuda { display: block; margin-top: 6px; font-size: 12px; color: var(--tinta-suave); }
.campo__estado { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: var(--morado-hondo); }
.campo--error .campo__control { border-color: var(--error); }
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.bloque {
    margin: 0 0 20px; padding: 20px 22px 6px;
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--papel); box-shadow: var(--sombra);
}
.bloque legend {
    padding: 0 8px; margin-left: -8px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--morado-hondo);
}
.bloque__nota { margin: -6px 0 16px; font-size: 13px; color: var(--tinta-suave); }

.interruptor { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 14px; cursor: pointer; }
.interruptor input { width: 17px; height: 17px; accent-color: var(--morado); }
.interruptor img { display: block; border-radius: 50%; }
.redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }

.foto { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 14px; }
.foto__previa {
    flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
    background: #EFEAF1; display: flex; align-items: center; justify-content: center;
}
.foto__previa img { width: 96px; height: 96px; object-fit: cover; }
.foto__hueco { font-size: 12px; color: var(--tinta-suave); }
.foto__acciones { flex: 1; min-width: 0; }

/* -------------------------------------------------------------- editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 26px; align-items: start; }
.editor__columna { min-width: 0; }
.editor__previa { position: sticky; top: 22px; }
.editor__pie { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.previa { padding: 18px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.previa__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.previa__estado { font-size: 12px; color: var(--tinta-suave); }
.previa__marco { overflow: auto; border: 1px dashed var(--linea); border-radius: 8px; background: #fff; }
.previa__marco iframe { display: block; width: 660px; height: 380px; border: 0; }
.previa__marco--ancho iframe { width: 100%; min-width: 660px; }
.previa__nota { margin: 12px 0 0; font-size: 12px; color: var(--tinta-suave); }

/* -------------------------------------------------------------- listado */
.listado { width: 100%; border-collapse: collapse; background: var(--papel); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.listado th, .listado td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.listado th { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--tinta-suave); background: #FBF9FC; }
.listado tr:last-child td { border-bottom: 0; }
.listado__acciones { white-space: nowrap; text-align: right; }
.listado__acciones .boton { margin-left: 4px; }
.listado__fecha { font-size: 13px; color: var(--tinta-suave); white-space: nowrap; }

.persona { display: flex; align-items: center; gap: 12px; }
.persona__foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #EFEAF1; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--morado-hondo); }
.persona__email { display: block; font-size: 13px; color: var(--tinta-suave); }

.vacio { padding: 56px 24px; text-align: center; background: var(--papel); border: 1px dashed var(--linea); border-radius: var(--radio); }
.vacio p { color: var(--tinta-suave); }

/* -------------------------------------------------------------- resultado */
.resultado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 26px; align-items: start; }
.resultado__firma { min-width: 0; padding: 20px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.resultado__acciones { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.resultado__estado { font-size: 13px; color: var(--ok); }

.codigo { margin-top: 20px; border-top: 1px solid var(--linea); padding-top: 14px; }
.codigo summary { cursor: pointer; font-size: 13px; color: var(--tinta-suave); }
.codigo textarea { width: 100%; margin: 12px 0; padding: 12px; border: 1px solid var(--linea); border-radius: 8px; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }

.instrucciones { padding: 22px; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }
.instrucciones ol { margin: 0; padding-left: 20px; font-size: 14px; }
.instrucciones li { margin-bottom: 8px; }
.instrucciones__nota { margin-top: 16px; padding: 12px 14px; background: #FDF6E4; border-left: 3px solid var(--oro); border-radius: 6px; font-size: 13px; }
.instrucciones__enlace { font-size: 12px; word-break: break-all; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- acceso */
.acceso { max-width: 380px; margin: 8vh auto 0; padding: 34px 32px; background: var(--papel); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--sombra); text-align: center; }
.acceso__logo { max-width: 200px; height: auto; margin-bottom: 22px; }
.acceso h1 { font-size: 21px; }
.acceso__texto { margin: 0 0 22px; font-size: 14px; color: var(--tinta-suave); }
.acceso .formulario { text-align: left; }

@media (max-width: 980px) {
    .editor, .resultado { grid-template-columns: minmax(0, 1fr); }
    .editor__previa { position: static; }
    .campo-doble, .redes { grid-template-columns: minmax(0, 1fr); }
    .listado, .listado thead, .listado tbody, .listado tr, .listado td { display: block; width: 100%; }
    .listado thead { display: none; }
    .listado td { border: 0; padding: 6px 16px; }
    .listado tr { border-bottom: 1px solid var(--linea); padding: 12px 0; }
    .listado__acciones { text-align: left; white-space: normal; }
}