/* ── Certificados Colegio — Public CSS ──────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@600&display=swap');

:root {
    --cc-azul:      #1e3a8a;
    --cc-azul-claro:#3b82f6;
    --cc-fondo:     #f0f4ff;
    --cc-borde:     #dbe4f3;
    --cc-texto:     #1e293b;
    --cc-hint:      #64748b;
    --cc-ok:        #16a34a;
    --cc-error:     #dc2626;
}

/* Card contenedor */
.cc-formulario-wrap,
.cc-verificador-wrap {
    max-width: 520px;
    margin: 40px auto;
    font-family: 'Lato', sans-serif;
    color: var(--cc-texto);
}

.cc-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 30px rgba(30,58,138,.12);
    overflow: hidden;
    border: 1px solid var(--cc-borde);
}

.cc-card-header {
    background: var(--cc-azul);
    color: white;
    padding: 30px 36px;
    text-align: center;
}
.cc-icon-shield { font-size: 36px; margin-bottom: 8px; }
.cc-card-header h2 { font-family: 'Playfair Display', serif; font-size: 20px; margin: 0; }
.cc-card-header p  { margin: 6px 0 0; font-size: 13px; opacity: .75; }

.cc-card-body { padding: 30px 36px; }

/* Selector tipo */
.cc-tipo-selector { display: flex; gap: 10px; margin-bottom: 24px; }
.cc-tipo-option {
    flex: 1; border: 2px solid var(--cc-borde); border-radius: 10px;
    padding: 12px 10px; text-align: center; cursor: pointer; font-size: 13px;
    transition: all .2s;
}
.cc-tipo-activo {
    border-color: var(--cc-azul);
    background: var(--cc-fondo);
    color: var(--cc-azul);
    font-weight: 700;
}
.cc-tipo-icon { display: block; font-size: 22px; margin-bottom: 4px; }

/* Form */
.cc-form-group { margin-bottom: 20px; }
.cc-form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--cc-texto); }
.cc-tooltip-icon { cursor: help; font-size: 14px; color: var(--cc-hint); }

.cc-input-wrap { position: relative; }
.cc-input-wrap input[type="text"] {
    width: 100%; padding: 12px 44px 12px 14px;
    border: 2px solid var(--cc-borde); border-radius: 8px;
    font-size: 16px; letter-spacing: 1px;
    transition: border-color .2s;
    font-family: 'Lato', sans-serif;
    outline: none;
}
.cc-input-wrap input:focus { border-color: var(--cc-azul-claro); }
.cc-input-wrap.cc-valido  input { border-color: var(--cc-ok); }
.cc-input-wrap.cc-invalido input { border-color: var(--cc-error); }

.cc-input-indicator {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 18px;
}

.cc-hint { font-size: 12px; color: var(--cc-hint); margin-top: 5px; display: block; }

/* Botón */
.cc-btn-primary {
    width: 100%; padding: 14px; background: var(--cc-azul);
    color: white; border: none; border-radius: 9px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: background .2s, transform .1s;
    font-family: 'Lato', sans-serif;
}
.cc-btn-primary:hover:not(:disabled) { background: #1e40af; transform: translateY(-1px); }
.cc-btn-primary:disabled { background: #94a3b8; cursor: not-allowed; }

/* Resultado */
.cc-resultado {
    margin-top: 18px; padding: 14px 18px;
    border-radius: 9px; font-size: 14px; line-height: 1.6;
}
.cc-resultado.cc-ok    { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; }
.cc-resultado.cc-error { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b; }
.cc-resultado .cc-folio { font-size: 12px; margin-top: 6px; color: #64748b; }

/* Aviso privacidad */
.cc-aviso-privacidad {
    margin-top: 18px; font-size: 11.5px; color: var(--cc-hint);
    text-align: center; line-height: 1.5;
}

/* ── Verificador ────────────────────────────────────────────────── */
.cc-verificado-badge {
    background: #f0fdf4; border: 2px solid #86efac; border-radius: 8px;
    padding: 12px; text-align: center; font-weight: 700; font-size: 15px;
    color: #166534; margin-bottom: 20px;
}

.cc-info-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cc-info-table th, .cc-info-table td { padding: 10px 12px; border-bottom: 1px solid var(--cc-borde); text-align: left; }
.cc-info-table th { width: 40%; color: var(--cc-hint); font-weight: 600; }
.cc-info-table td { font-weight: 700; }

.cc-aviso-verificacion {
    margin-top: 18px; font-size: 12px; color: var(--cc-hint);
    text-align: center; background: var(--cc-fondo);
    padding: 12px; border-radius: 8px; line-height: 1.6;
}