/* THOMAS & ASOCIADOS — Portal de clientes
   Los estilos se acotan a .ta-portal para no chocar con el tema Porto,
   que fuerza color y tamaño en párrafos, botones y campos de formulario.
   Misma paleta que el agendador de citas. */

.ta-portal {
	--tp-gold: #eaac5b;
	--tp-gold-deep: #e5962e;
	--tp-ink: #222529;
	--tp-muted: #6b6b6b;
	--tp-paper: #faf7f2;
	--tp-line: #e7ded1;
	--tp-ok: #1a7f37;
	--tp-error: #b32d2e;
	--tp-radio: 16px;
	max-width: 920px;
	margin: 0 auto;
	color: var(--tp-ink);
	font-size: 16px;
	line-height: 1.55;
	box-sizing: border-box;
}

.ta-portal *,
.ta-portal *::before,
.ta-portal *::after { box-sizing: border-box; }

.ta-portal p { color: inherit; font-size: inherit; margin: 0 0 12px; font-style: normal; }
.ta-portal a { color: #a8701f; }
.ta-portal button, .ta-portal input, .ta-portal select, .ta-portal textarea { font-style: normal; text-transform: none; letter-spacing: normal; }

/* ---------- tarjetas ---------- */

.ta-portal .tp-tarjeta {
	background: #fff;
	border: 1px solid var(--tp-line);
	border-radius: var(--tp-radio);
	padding: 24px;
	box-shadow: 0 10px 34px rgba(34, 37, 41, .06);
	margin-bottom: 18px;
}

.ta-portal .tp-angosta { max-width: 460px; margin-left: auto; margin-right: auto; }

.ta-portal .tp-marca {
	display: block;
	color: var(--tp-gold-deep);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.ta-portal .tp-h {
	font-size: 26px;
	line-height: 1.25;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--tp-ink);
}

.ta-portal h3, .ta-portal h4 { color: var(--tp-ink); margin: 0; }
.ta-portal .tp-nota { color: var(--tp-muted); font-size: 15px; }
.ta-portal .tp-legal { color: var(--tp-muted); font-size: 13px; margin-top: 10px; }
.ta-portal .tp-links { font-size: 14px; margin: 14px 0 0; }

/* ---------- avisos ---------- */

.ta-portal .tp-aviso {
	border-radius: 10px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 15px;
	border: 1px solid transparent;
}
.ta-portal .tp-aviso-ok { background: #eef8f0; border-color: #cde8d3; color: var(--tp-ok); }
.ta-portal .tp-aviso-error { background: #fbeeee; border-color: #f0cccc; color: var(--tp-error); }
.ta-portal .tp-aviso-info { background: var(--tp-paper); border-color: var(--tp-line); color: var(--tp-ink); }

/* ---------- formularios ---------- */

.ta-portal .tp-form { margin-top: 16px; }
.ta-portal .tp-campo { margin-bottom: 14px; }
.ta-portal .tp-campo label { display: block; font-size: 14px; margin-bottom: 5px; color: var(--tp-ink); }
.ta-portal .tp-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.ta-portal .tp-campo input {
	width: 100%;
	height: 46px;
	border: 1px solid var(--tp-line);
	border-radius: 10px;
	padding: 0 14px;
	font-size: 16px;
	background: #fff;
	color: var(--tp-ink);
	box-shadow: none;
	margin: 0;
}
.ta-portal .tp-campo input:focus { outline: none; border-color: var(--tp-gold); box-shadow: 0 0 0 3px rgba(234, 172, 91, .22); }

.ta-portal .tp-clave { position: relative; }
.ta-portal .tp-clave input { padding-right: 64px; }
.ta-portal .tp-ver-clave {
	position: absolute;
	right: 6px;
	top: 6px;
	height: 34px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: var(--tp-paper);
	color: var(--tp-muted);
	font-size: 13px;
	cursor: pointer;
}

.ta-portal .tp-check { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; margin: 4px 0 16px; cursor: pointer; }
.ta-portal .tp-check input { margin-top: 4px; flex: 0 0 auto; }

.ta-portal .tp-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- botones ---------- */

.ta-portal .tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--tp-gold);
	border-radius: 10px;
	background: var(--tp-gold);
	color: var(--tp-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.ta-portal .tp-btn:hover { background: var(--tp-gold-deep); border-color: var(--tp-gold-deep); color: var(--tp-ink); }
.ta-portal .tp-form .tp-btn { width: 100%; }
.ta-portal .tp-btn-sec { background: #fff; border-color: var(--tp-line); color: var(--tp-ink); font-weight: 500; }
.ta-portal .tp-btn-sec:hover { background: var(--tp-paper); border-color: var(--tp-gold); }

/* ---------- encabezado del tablero ---------- */

.ta-portal .tp-cab {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--tp-line);
}
.ta-portal .tp-cab .tp-nota { margin: 0; }
.ta-portal .tp-acciones { display: flex; gap: 8px; align-items: center; }
.ta-portal .tp-acciones form { margin: 0; }

/* ---------- expedientes ---------- */

.ta-portal .tp-exp-cab { margin-bottom: 16px; }
.ta-portal .tp-exp-titulo { font-size: 18px; line-height: 1.35; font-weight: 600; margin: 0 0 10px; word-break: break-word; }

/* ---------- su equipo (foto y nombre de los abogados) ---------- */

.ta-portal .tp-exp-cab { display: grid; grid-template-columns: 1fr minmax(240px, 300px); gap: 18px 24px; align-items: start; }
.ta-portal .tp-exp-cab-txt { min-width: 0; }
.ta-portal .tp-equipo-col {
	background: var(--tp-paper);
	border: 1px solid var(--tp-line);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ta-portal .tp-equipo-col h4 {
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--tp-muted);
	font-weight: 600;
	margin: 0;
}
.ta-portal .tp-persona { display: flex; align-items: center; gap: 12px; }
.ta-portal .tp-persona-foto {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background: #222529;
	border: 2px solid var(--tp-gold);
	display: grid;
	place-items: center;
}
.ta-portal .tp-persona-foto img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ta-portal .tp-persona-foto b { color: var(--tp-gold); font-size: 20px; letter-spacing: 1px; font-weight: 600; }
.ta-portal .tp-persona-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ta-portal .tp-persona-papel { font-size: 12.5px; color: var(--tp-muted); }
.ta-portal .tp-persona-txt strong { font-size: 15px; color: var(--tp-ink); font-weight: 600; }
.ta-portal .tp-persona-txt a { font-size: 13px; margin-top: 2px; }
.ta-portal .tp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ta-portal .tp-chip {
	display: inline-block;
	font-size: 13px;
	padding: 4px 11px;
	border-radius: 999px;
	background: #fdf3e4;
	border: 1px solid #f3dcb8;
	color: var(--tp-ink);
}
.ta-portal .tp-chip-etq { color: var(--tp-muted); }
.ta-portal .tp-chip-gris { background: #f1f1f1; border-color: #e1e1e1; color: var(--tp-muted); }

.ta-portal .tp-exp-cuerpo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.ta-portal .tp-exp-cuerpo h4 {
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--tp-muted);
	font-weight: 600;
	margin: 0 0 8px;
}

.ta-portal .tp-avance-texto { font-size: 15.5px; white-space: normal; }
.ta-portal .tp-fecha-act { font-size: 13px; color: var(--tp-muted); margin: 8px 0 0; }
.ta-portal .tp-dato { font-size: 14px; margin: 8px 0 0; }
.ta-portal .tp-dato span { color: var(--tp-muted); }

.ta-portal .tp-fechas { border-left: 1px solid var(--tp-line); padding-left: 20px; }
.ta-portal .tp-fechas ul { list-style: none; margin: 0; padding: 0; }
.ta-portal .tp-fechas li {
	margin: 0 0 10px;
	padding: 10px 12px;
	background: var(--tp-paper);
	border-left: 3px solid var(--tp-gold);
	border-radius: 8px;
}
.ta-portal .tp-fecha-cuando { display: block; font-weight: 600; font-size: 14.5px; }
.ta-portal .tp-fecha-que { display: block; font-size: 13.5px; color: var(--tp-muted); }

/* ---------- cuenta de honorarios ---------- */

.ta-portal .tp-honorarios {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid;
}
.ta-portal .tp-hon-icono {
	flex: 0 0 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
}
.ta-portal .tp-hon-txt { display: flex; flex-direction: column; line-height: 1.35; }
.ta-portal .tp-hon-titulo { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; }
.ta-portal .tp-hon-txt strong { font-size: 18px; }
.ta-portal .tp-hon-nota { font-size: 13.5px; }
.ta-portal .tp-hon-verde { background: #e9f7ef; border-color: #a7dcbc; color: #145a32; }
.ta-portal .tp-hon-verde .tp-hon-icono { background: #1e8449; }
.ta-portal .tp-hon-rojo { background: #fdecea; border-color: #f1aaa3; color: #8e1b12; }
.ta-portal .tp-hon-rojo .tp-hon-icono { background: #c0392b; }
.ta-portal .tp-hon-rojo a { color: #8e1b12; font-weight: 600; }
.ta-portal .tp-hon-tramite { background: #f6f4ef; border-color: #ddd5c4; color: #5c5240; }
.ta-portal .tp-hon-tramite .tp-hon-icono { background: #a8977a; }
.ta-portal .tp-hon-tramite a { color: #5c5240; font-weight: 600; }

/* ---------- boletín judicial ---------- */

.ta-portal .tp-boletin {
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid var(--tp-line);
	border-radius: 10px;
	background: #fbfaf7;
}
.ta-portal .tp-boletin-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ta-portal .tp-boletin-cab h4 {
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--tp-muted);
	font-weight: 600;
	margin: 0;
}
.ta-portal .tp-boletin-exp { font-size: 12px; color: var(--tp-muted); }
.ta-portal .tp-boletin-lista { list-style: none; margin: 0; padding: 0; }
.ta-portal .tp-boletin-lista li {
	padding: 5px 0 5px 12px;
	border-left: 2px solid var(--tp-line);
	margin: 0 0 0 4px;
	position: relative;
	line-height: 1.4;
}
.ta-portal .tp-boletin-lista li::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 10px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--tp-gold);
}
.ta-portal .tp-boletin-fecha { display: block; font-weight: 600; font-size: 12.5px; }
.ta-portal .tp-boletin-texto { display: block; font-size: 13px; }
.ta-portal .tp-boletin-notif { display: block; font-size: 11.5px; color: var(--tp-muted); }
.ta-portal .tp-boletin-explica {
	display: block;
	font-size: 13px;
	margin: 3px 0 2px;
	padding: 4px 8px;
	background: #fff;
	border-left: 3px solid var(--tp-gold);
	border-radius: 0 6px 6px 0;
}
.ta-portal .tp-boletin-explica strong { font-weight: 600; color: #a8701f; }
.ta-portal .tp-boletin-cuenta {
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--tp-gold);
	color: #fff;
	font-size: 10.5px;
	letter-spacing: .3px;
	text-transform: none;
	vertical-align: 1px;
}
.ta-portal .tp-boletin-marca {
	margin-left: 4px;
	padding: 0 6px;
	border-radius: 4px;
	background: #fbecd2;
	color: #8a5a12;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .5px;
	vertical-align: 1px;
}
.ta-portal .tp-boletin-lista li.tp-boletin-nuevo::before { background: var(--tp-gold); }
.ta-portal .tp-boletin-mas summary { cursor: pointer; font-size: 13px; color: #a8701f; margin: 4px 0 2px; }
/* Los acuerdos anteriores se desplazan dentro del recuadro para que no crezca. */
.ta-portal .tp-boletin-mas[open] > .tp-boletin-lista { max-height: 220px; overflow-y: auto; padding-right: 4px; }
.ta-portal .tp-boletin-fuente { font-size: 11.5px; color: var(--tp-muted); margin: 6px 0 0; }

.ta-portal .tp-concluido { opacity: .78; }
.ta-portal .tp-vacio { text-align: center; }

/* ---------- asistente de IA ---------- */

.ta-portal .tp-asis-titulo { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.ta-portal .tp-asis-log {
	max-height: 420px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 14px 0;
}
.ta-portal .tp-asis-log:empty { display: none; }
.ta-portal .tp-asis-msg {
	max-width: 86%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 15px;
	line-height: 1.5;
	word-wrap: break-word;
}
.ta-portal .tp-asis-cliente { align-self: flex-end; background: #fdf3e4; border: 1px solid #f3dcb8; border-bottom-right-radius: 4px; }
.ta-portal .tp-asis-bot { align-self: flex-start; background: var(--tp-paper); border: 1px solid var(--tp-line); border-bottom-left-radius: 4px; }
.ta-portal .tp-asis-espera { color: var(--tp-muted); font-style: italic; }
.ta-portal .tp-asis-error { color: var(--tp-error); background: #fbeeee; border-color: #f0cccc; }
.ta-portal .tp-asis-sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ta-portal .tp-asis-sug {
	border: 1px solid var(--tp-line);
	background: #fff;
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 13.5px;
	color: var(--tp-ink);
	cursor: pointer;
}
.ta-portal .tp-asis-sug:hover { border-color: var(--tp-gold); background: var(--tp-paper); }
.ta-portal .tp-asis-form { display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.ta-portal .tp-asis-texto {
	flex: 1;
	min-height: 46px;
	max-height: 160px;
	resize: vertical;
	border: 1px solid var(--tp-line);
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 15.5px;
	font-family: inherit;
	color: var(--tp-ink);
	background: #fff;
	margin: 0;
}
.ta-portal .tp-asis-texto:focus { outline: none; border-color: var(--tp-gold); box-shadow: 0 0 0 3px rgba(234, 172, 91, .22); }
.ta-portal .tp-asis-form .tp-btn { width: auto; }
.ta-portal .tp-asis-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--tp-muted); }
.ta-portal .tp-asis-proximamente .tp-asis-titulo .tp-chip { vertical-align: middle; margin-left: 6px; font-weight: 500; }
.ta-portal .tp-asis-proximamente .tp-asis-form { margin-top: 12px; opacity: .6; }
.ta-portal .tp-asis-proximamente .tp-btn[disabled] { cursor: not-allowed; }
.ta-portal .tp-asis-nueva { border: 0; background: none; color: #a8701f; font-size: 13px; cursor: pointer; padding: 0; }

/* ---------- ayuda y contraseña ---------- */

.ta-portal .tp-ayuda {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--tp-paper);
}
.ta-portal .tp-ayuda h4 { font-size: 17px; margin-bottom: 2px; }
.ta-portal .tp-ayuda .tp-nota { margin: 0; }
.ta-portal .tp-ayuda-btns { display: flex; gap: 8px; }

.ta-portal .tp-cambiar summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.ta-portal .tp-cambiar[open] summary { margin-bottom: 6px; }
.ta-portal .tp-cambiar .tp-btn { width: auto; }

.ta-portal .tp-puntos { margin: 0 0 14px 18px; padding: 0; }
.ta-portal .tp-puntos li { margin-bottom: 8px; font-size: 15px; }

.ta-portal .tp-clientes { list-style: none; margin: 10px 0 16px; padding: 0; }
.ta-portal .tp-clientes li { padding: 8px 0; border-bottom: 1px solid var(--tp-line); }
.ta-portal .tp-clientes span { color: var(--tp-muted); font-size: 14px; margin-left: 6px; }

/* ---------- celular ---------- */

@media (max-width: 680px) {
	.ta-portal .tp-tarjeta { padding: 18px; }
	.ta-portal .tp-h { font-size: 22px; }
	.ta-portal .tp-exp-cuerpo { grid-template-columns: 1fr; gap: 16px; }
	.ta-portal .tp-exp-cab { grid-template-columns: 1fr; }
	.ta-portal .tp-fechas { border-left: 0; padding-left: 0; border-top: 1px solid var(--tp-line); padding-top: 14px; }
	.ta-portal .tp-fila { grid-template-columns: 1fr; gap: 0; }
	.ta-portal .tp-acciones, .ta-portal .tp-ayuda-btns { width: 100%; }
	.ta-portal .tp-acciones .tp-btn, .ta-portal .tp-acciones form, .ta-portal .tp-ayuda-btns .tp-btn { flex: 1; width: 100%; }
}

/* ---------- bienvenida con Tomás (pantalla de entrada, v1.6.2) ---------- */

.ta-portal.tp-fuera { max-width: 1040px; }
.ta-portal .tp-bv { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 28px 0 48px; }
.ta-portal .tp-bv-foto { margin: 0; border-radius: 22px; overflow: hidden; background: var(--tp-paper); box-shadow: 0 18px 40px -24px rgba(34, 37, 41, .45); }
.ta-portal .tp-bv-foto img { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 1200 / 670; object-fit: cover; object-position: 50% 30%; }
.ta-portal .tp-bv-col { display: flex; flex-direction: column; gap: 18px; }
.ta-portal .tp-bv-texto { max-width: 460px; width: 100%; margin: 0 auto; }
.ta-portal .tp-bv-h { font-size: 30px; line-height: 1.15; font-weight: 600; margin: 0 0 10px; color: var(--tp-ink); text-wrap: balance; }
.ta-portal .tp-bv-lead { color: #4a4036; font-size: 17px; }
.ta-portal .tp-bv-lista { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.ta-portal .tp-bv-lista li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; color: #4a4036; margin: 0; }
.ta-portal .tp-bv-lista li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--tp-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ta-portal .tp-bv-lista strong { color: var(--tp-ink); }
.ta-portal .tp-bv-priv { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #8a6a24; margin: 0; }
.ta-portal .tp-bv .tp-tarjeta { width: 100%; margin-bottom: 0; }

@media (min-width: 900px) {
	.ta-portal .tp-bv { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 44px; align-items: start; }
	.ta-portal .tp-bv-foto { position: sticky; top: 110px; }
	.ta-portal .tp-bv-foto img { aspect-ratio: 880 / 1092; object-position: 50% 0; }
	.ta-portal .tp-bv-texto, .ta-portal .tp-bv .tp-angosta { margin-left: 0; margin-right: 0; max-width: 500px; }
	.ta-portal .tp-bv-h { font-size: 36px; }
}